@extends('admin.layouts.contentLayoutMaster')

@section('title','Sample-Form')

@section('vendor-styles')
{{-- 日期時間下拉 --}}
<link rel="stylesheet" type="text/css" href="{{ asset('plugins/flatpickr/flatpickr.min.css') }}">
@endsection

@section('page-styles')

@endsection

@section('content')
<section id="basic-horizontal-layouts">
    <div class="row match-height justify-content-center">
        <div class="col-md-10 col-12">
            <form class="form form-horizontal" action="" method="POST">
                @csrf
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title"></h4>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <div class="form-body">
                                <div class="row">
                                    <div class="col-md-1 offset-md-3">
                                        <label>廠商分類</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <select class="form-control" id="firm_category_id" name="firm_category_id">
                                            <option> </option>
                                            <option>1</option>
                                            <option>2</option>
                                        </select>
                                        
                                        @if ($errors->has('firm_category_id')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('firm_category_id') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>名稱</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="name" name="name" placeholder="名稱" type="text" value="{{ old('name') }}">
                                        @if ($errors->has('name')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('name') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>電話</label>
                                    </div>
                                    <div class="col-md-1 form-group">
                                        <input class="form-control" id="telephone_area_code" name="telephone_area_code" placeholder="區碼" type="text" value="{{ old('telephone_area_code') }}">
                                        @if ($errors->has('telephone_area_code')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('telephone_area_code') ]) 
                                        @endif
                                    </div>
                                    <span style="padding-top:7px;">
                                        - 
                                    </span>
                                    <div class="col-md-5 form-group">   
                                        <input class="form-control" id="telephone_number" name="telephone_number" placeholder="號碼" type="text" value="{{ old('telephone_number') }}">
                                        @if ($errors->has('telephone_number')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('telephone_number') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>手機</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="cellphone" name="cellphone" placeholder="手機" type="text" value="{{ old('cellphone') }}" maxlength="10">
                                        @if ($errors->has('cellphone')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('cellphone') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>郵件</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="email" name="email" placeholder="郵件" type="text" value="{{ old('email') }}">
                                        @if ($errors->has('email')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('email') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>住址</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div role="tw-city-selector" class="city-selector-set"></div>
                                        @if ($errors->has('county')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('county') ]) 
                                        @endif
                                        @if ($errors->has('district')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('district') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-1 offset-md-3">
                                        <label> </label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="address" name="address" placeholder="地址" type="text" value="{{ old('address') }}">
                                        @if ($errors->has('address')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('address') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>聯絡人</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control" id="contact_person" name="contact_person" placeholder="聯絡人" type="text" value="{{ old('contact_person') }}">
                                        @if ($errors->has('contact_person')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('contact_person') ]) 
                                        @endif
                                    </div>
                                    <div class="col-md-1 offset-md-3">
                                        <label>日期時間</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <input class="form-control flatpickr1" id="flatpickr666" name="flatpickr666" placeholder="日期時間" type="text" value="{{ old('flatpickr666') }}">
                                        @if ($errors->has('flatpickr666')) 
                                            @include('admin.panels.input-invalid-messages', [ 'messages' => $errors->get('flatpickr666') ]) 
                                        @endif
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>列表</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div class="table-responsive">
                                            <table class="table table-hover mb-0">
                                                <thead>
                                                    <tr>
                                                        <th>
                                                            <div class="checkbox">
                                                                <input type="checkbox" id="checkbox_all" class="checkbox-input all">
                                                                <label for="checkbox_all"></label>
                                                            </div>
                                                        </th>
                                                        <th>NAME</th>
                                                        <th>RATE</th>
                                                        <th>SKILL</th>                                                   
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @for ($i=1;$i<=10;$i++)
                                                        <tr>
                                                            <td>
                                                                <div class="checkbox">
                                                                    <input 
                                                                        type="checkbox" 
                                                                        id="checkbox_{{ $i }}" 
                                                                        name="checkbox_{{ $i }}" 
                                                                        class="checkbox-input" 
                                                                        value="1"
                                                                        >
                                                                    <label for="checkbox_{{ $i }}"></label>
                                                                </div>
                                                            </td>
                                                            <td class="text-bold-500">Michael Right</td>
                                                            <td>$15/hr</td>
                                                            <td class="text-bold-500">UI/UX</td>
                                                        </tr>
                                                    @endfor
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="col-md-1 offset-md-3">
                                        <label>啟用</label>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <div class="custom-control custom-switch custom-control-inline mb-1">
                                        <input type="checkbox" class="custom-control-input" id="status" name="status" value="1" checked>
                                        <label class="custom-control-label mr-1" for="status">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <div class="row">
                                <div class="col-lg-8 ml-lg-auto">
                                    <button class="btn btn-primary mr-1 mb-1" type="submit">Submit</button> 
                                    <button class="btn btn-light glow mr-1 mb-1" type="reset" data-force="1">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection

@section('vendor-scripts')

@endsection

@section('page-scripts')
    {{-- 縣市下拉 --}} 
    <script src="{{ asset('plugins/tw-city-selector/tw-city-selector.min.js') }}"></script>
    <script>
        new TwCitySelector({
            el : '.city-selector-set',
            countyValue : '{{ old("county") }}',
            districtValue : '{{ old("district") }}',
        });
    </script>

    {{-- 日期時間下拉 --}}
    <script src="{{ asset('plugins/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        flatpickr(".flatpickr1", {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
        });
    </script>

    {{-- validation --}}
    <script src="{{ asset('plugins/jquery-validation/jquery.validate.js') }}"></script>
    <script>    
        $("#main_form").validate({
            errorElement : 'div',
            errorClass: 'invalid-feedback',
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            rules : {
            activity_id : {
                required : true,
                },
            },
            messages : {
                activity_id : {
                
                    required : "此為必填欄位"
                },

            },

            submitHandler: function (form) {
                form.submit();
                // $(form).trigger('submit');
            }
        });
    </script>







@endsection