@extends('layouts.web')

@section('css')
<link href="{{ asset('css/bootstrap-select.min.css') }}" rel="stylesheet" />
<link href="{{ asset('css/bootstrap-timepicker.min.css') }}" rel="stylesheet" />
@endsection

@section('content')
<div class="container-fluid pt-3">
    <form action="{{ route('branch.store') }}"
            novalidate class="{{ ($errors->any()) ? 'was-validated' : 'needs-validation' }}"
            method="post">
    @csrf
        <div class="row">
            <div class="col-12">
                <div class="card card-outline card-success">
                    <div class="card-header">
                        <h3 class="card-title">ข้อมูลสาขา</h3>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-12 col-md-6">
                                <div class="form-group">
                                    <label for="name">ชื่อสาขา <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" placeholder="ชื่อสาขา" required>
                                    @error('name')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-2">
                                <div class="form-group">
                                    <label for="code">รหัสสาขา <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="code" name="code" placeholder="รหัสสาขา" required>
                                    @error('code')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 col-md-8">
                                <div class="form-group">
                                    <label for="address">ที่ตั้ง <span class="text-red">*</span></label>
                                    <input type="text" class="form-control" id="address" name="address" placeholder="สถานที่ตั้งสาขา" required>
                                    @error('address')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-12 col-md-4">
                                <div class="form-group">
                                    <label for="province">จังหวัด <span class="text-red">*</span></label>
                                    <select class="form-control selectpicker show-menu-arrow" id="province" name="province" data-live-search="true" title="--เลือกจังหวัด--" required>
                                        @foreach ($provinces as $indexKey => $province)
                                        <option value="{{ $province->name }}">{{ $province->name }}</option>
                                        @endforeach
                                    </select>
                                    @error('province')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-8 col-md-3">
                                <div class="form-group">
                                    <label for="phone1">หมายเลขโทรศัพท์ 1 <span class="text-red">*</span></label>
                                    <input type="number"
                                            class="form-control"
                                            id="phone1"
                                            name="phone1"
                                            placeholder="หมายเลขโทรศัพท์ 1"
                                            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                            maxlength="10"
                                            required>
                                    @error('phone1')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-8 col-md-3">
                                <div class="form-group">
                                    <label for="phone1">หมายเลขโทรศัพท์ 2</label>
                                    <input type="number"
                                            class="form-control"
                                            id="phone2"
                                            name="phone2"
                                            placeholder="หมายเลขโทรศัพท์ 2"
                                            oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
                                            maxlength="10">
                                </div>
                            </div>
                            <div class="col-sm-8 col-md-3">
                                <div class="form-group">
                                    <label for="open">เวลาเปิด <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="open" name="open" placeholder="เวลาเปิด" autocomplete="off" value="7:00:00" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-clock"></i></span>
                                        </div>
                                    </div>
                                    @error('open')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-sm-8 col-md-3">
                                <div class="form-group">
                                    <label for="close">เวลาปิด <span class="text-red">*</span></label>
                                    <div class="input-group mb-3">
                                        <input type="text" class="form-control" id="close" name="close" placeholder="เวลาปิด" autocomplete="off" value="20:00:00" required>
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="far fa-clock"></i></span>
                                        </div>
                                    </div>
                                    @error('close')
                                    <div class="text-danger">{{  $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>  <!-- div card body -->
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <div style="float:left">
                            <a href="{{ route('branch.index') }}" class="btn btn-outline-secondary"><i class="fas fa-chevron-left"></i> ย้อนกลับ</a>
                        </div>
                        <div style="float: right">
                            <button type="reset" class="btn btn-outline-secondary" value="reset">ล้างข้อความ</button>
                            <button type="submit" class="btn btn-success ml-2" value="add-course">เพิ่มสาขา</button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('footerscript')
<script src="{{ asset('js/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('js/bootstrap-timepicker.min.js') }}"></script>
<script>
    $(document).ready(function(){
        $('.selectpicker').selectpicker();

        $('#open').timepicker({
            showMeridian: false,
            showSeconds: true,
            minuteStep: 1,
            secondStep: 1,
            icons: {
                up: 'fa fa-angle-up',
                down: 'fa fa-angle-down'
            }
        });

        $('#close').timepicker({
            showMeridian: false,
            showSeconds: true,
            minuteStep: 1,
            secondStep: 1,
            icons: {
                up: 'fa fa-angle-up',
                down: 'fa fa-angle-down'
            }
        });
    });
</script>
@endsection
