@extends('admin.layouts.app')

@section('content')
    @include('admin.layouts.partial.toolbar', ['breadcrumb' => 'Create Branch']);

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Layout-->
            <div class="d-flex flex-column flex-lg-row">
                <!--begin::Content-->
                <div class="flex-lg-row-fluid me-lg-15 order-2 order-lg-1 mb-10 mb-lg-0">
                    <div class="card shadow-none border-0 rounded-0">
                        <!--begin::Header-->
                        <div class="card-header" id="kt_activities_header">
                            <h3 class="card-title fw-bold text-dark">Create Branch</h3>
                        </div>
                        <!--end::Header-->
                        <div class="card-body position-relative">
                            <form class="form" action="{{ route('admin.client.branch.store', $client->id) }}"
                                id="kt_branch_form" data-kt-redirect="{{ route('admin.client.branch.list', $client->id) }}"
                                data-kt-check-email="">
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Shop ID</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="ShopID" value="" id="ShopID" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Shop Name</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="ShopName" value="" id="ShopName" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Email</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="eMail" value="" id="eMail" maxlength="100" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-semibold mb-2">Country</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <select name="Country" class="form-select form-select-solid fw-bold" id="Country">
                                    </select>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Phone</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="Phone" value="" id="Phone" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Address</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <textarea class="form-control form-control-solid" placeholder="" name="Address" value="" id="Address"
                                        maxlength="50"></textarea>
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">City</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="City" value="" id="City" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->
                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">ZIP</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="number" class="form-control form-control-solid" placeholder=""
                                        name="ZIP" value="" id="ZIP" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <!--begin::Input group-->
                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="fs-6 fw-semibold mb-2">Contact Person</label>
                                    <!--end::Label-->
                                    <!--begin::Input-->
                                    <input type="text" class="form-control form-control-solid" placeholder=""
                                        name="Contact" value="" id="Contact" maxlength="50" />
                                    <!--end::Input-->
                                </div>
                                <!--end::Input group-->

                                <div class="flex-center">
                                    <!--begin::Button-->
                                    <button type="submit" id="kt_branch_submit" class="btn btn-primary me-3">
                                        <span class="indicator-label">Save</span>
                                        <span class="indicator-progress">Please wait...
                                            <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    </button>
                                    <!--end::Button-->
                                    <!--begin::Button-->
                                    <a href="{{ route('admin.client.branch.list', $client->id) }}"
                                        class="btn btn-primary">Close</a>
                                    <!--end::Button-->
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/custom/admin/branch/manual-create.js') }}?{{ env('JS_REFRESH_TOKEN') }}"></script>
    <script>
        $.ajax({
            url: "https://restcountries.com/v3.1/all?fields=name,cca2",
            method: "GET",
            success: function(data) {
                // Transforms the top-level key of the response object from 'items' to 'results'
                let result = [{
                    id: '',
                    text: ''
                }];
                data.forEach(element => {
                    result.push({
                        id: element.cca2,
                        text: element.name.common
                    });
                });

                // Set the loaded data to Select2
                $('#Country').select2({
                    placeholder: "Select Country",
                    data: result,
                });
            }
        });
    </script>
@endpush