@extends('layouts.app')
@section('title', \App\CPU\translate('User Add'))
@push('css_or_js')
    <meta name="csrf-token" content="{{ csrf_token() }}">
@endpush

@section('content')
    <div class="content container-fluid">
        <!-- Page Title -->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <!--begin::Toolbar container-->
            <div id="kt_app_toolbar_container" class="app-container container-xxxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <!--begin::Title-->
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        Add New User</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="" class="text-muted text-hover-primary">Dashboard</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Users</li>
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">{{ \App\CPU\translate('Create a User') }}</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </div>
                <!--end::Page title-->

            </div>
            <!--end::Toolbar container-->
        </div>
        <!-- End Page Title -->

        <!-- Content Row -->
        <div class="row">
            <div class="col-md-12">
                <form action="{{ route('admin.employee.store') }}" method="post" enctype="multipart/form-data"
                    style="text-align: {{ Session::get('direction') === 'rtl' ? 'right' : 'left' }};">
                    @csrf
                    <div class="card">
                        <div class="card-body">
                            <h5 class="mb-0 page-header-title d-flex align-items-center gap-2 border-bottom pb-3 mb-3">
                                <i class="tio-user"></i>
                                {{ \App\CPU\translate('General_Information') }}
                            </h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="name"
                                            class="title-color">{{ \App\CPU\translate('Full Name') }}</label>
                                        <input type="text" name="name" class="form-control" id="name"
                                            placeholder="{{ \App\CPU\translate('Ex') }} : Jhon Doe"
                                            value="{{ old('name') }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="name" class="title-color">{{ \App\CPU\translate('Phone') }}</label>
                                        <input type="number" name="phone" value="{{ old('phone') }}"
                                            class="form-control" id="phone"
                                            placeholder="{{ \App\CPU\translate('Ex') }} : +88017********" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="name" class="title-color">{{ \App\CPU\translate('Role') }}</label>
                                        <select class="form-control" id="role_select" name="role_id">
                                            <option value="0" selected disabled>
                                                ---{{ \App\CPU\translate('select') }}---
                                            </option>
                                            @foreach ($rls as $r)
                                                <option value="{{ $r->id }}"
                                                    {{ old('role_id') == $r->id ? 'selected' : '' }}>{{ $r->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-6 form-group">
                                        <label for="status"
                                            class="title-color">{{ \App\CPU\translate('Status') }}</label>
                                        <div class="form-check form-check-solid form-switch form-check-custom fv-row">
                                            <input class="form-check-input w-45px h-30px" name="status" value="1"
                                                checked type="checkbox" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label for="name" class="title-color">{{ \App\CPU\translate('Email') }}</label>
                                        <input type="email" name="email" value="{{ old('email') }}"
                                            class="form-control" id="email"
                                            placeholder="{{ \App\CPU\translate('Ex') }} : ex@gmail.com" required>
                                    </div>
                                    {{-- <div class="form-group">
                                        <label for="password"
                                            class="title-color">{{ \App\CPU\translate('password') }}</label>
                                        <input type="password" name="password" class="form-control" id="password"
                                            placeholder="{{ \App\CPU\translate('Password') }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="confirm_password"
                                            class="title-color">{{ \App\CPU\translate('confirm_password') }}</label>
                                        <input type="password" name="password_confirmation" class="form-control"
                                            id="confirm_password"
                                            placeholder="{{ \App\CPU\translate('Confirm Password') }}" required>
                                    </div> --}}
                                    <div class="form-group">
                                        <label for="name"
                                            class="title-color">{{ \App\CPU\translate('Onhand Customers') }}</label>
                                        <select aria-label="Select an Onhand Customer" id="onhand_customer" name="onhand_customer"
                                            data-control="select2" data-placeholder="Onhand Customer"
                                            class="form-select form-select-sm form-select-solid">
                                            <option value="0" selected disabled>
                                                {{ \App\CPU\translate('select') }}
                                            </option>
                                            @foreach ($OnhandCustomers as $customer)
                                                <option value="{{ $customer }}"
                                                    {{ old('onhand_customer') == $customer ? 'selected' : '' }}>{{ $customer }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    
                                    <div class="col-md-6 form-group">
                                        <label for="status"
                                            class="title-color">{{ \App\CPU\translate('View Others') }}</label>
                                        <div class="form-check form-check-solid form-switch form-check-custom fv-row">
                                            <input class="form-check-input w-45px h-30px" name="view_others" value="1"
                                                checked type="checkbox" />
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="card mt-3">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="card-header">
                                            <div class="card-title">
                                                <h2>Vendors</h2>
                                            </div>
                                        </div>
                                        <!--end::Card header-->
                                        <!--begin::Card body-->
                                        <div class="card-body pt-0">
                                            <!--begin::Input group-->
                                            <div class="" data-kt-ecommerce-catalog-add-product="auto-options">
                                                <!--begin::Label-->

                                                <!--end::Label-->
                                                <!--begin::Repeater-->
                                                <div id="kt_ecommerce_add_product_options">
                                                    <!--begin::Form group-->
                                                    <div class="form-group">
                                                        <div data-repeater-list="vendors" class="d-flex flex-column gap-3">
                                                            <div data-repeater-item="vendor"
                                                                class="form-group d-flex flex-wrap align-items-center gap-5">
                                                                <div class="col-md-3 form-group">
                                                                    <label
                                                                        class="fs-6 fw-semibold mb-2 RequiredLable">Vendor
                                                                        Name</label>
                                                                    <input type="text"
                                                                        class="form-control mw-100 w-200px"
                                                                        name="vendor_name" placeholder="Vendor Name" />
                                                                </div>
                                                                <!--begin::Input-->
                                                                <div class="col-md-3 form-group">
                                                                    <label
                                                                        class="required fs-6 fw-semibold mb-2 RequiredLable">Vendor
                                                                        No</label>
                                                                    <input type="text"
                                                                        class="form-control mw-100 w-200px RequiredLable"
                                                                        name="vendor_no" placeholder="Vendor No" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <!--begin::Input-->
                                                                <div class="col-md-3 form-group">
                                                                    <label class=" fs-6 fw-semibold mb-2">Vendor
                                                                        Business</label>
                                                                    <input type="text"
                                                                        class="form-control mw-100 w-200px"
                                                                        name="vendor_business"
                                                                        placeholder="Vendor Business" />
                                                                </div>
                                                                <div class="col-md-3 form-group">
                                                                    <label
                                                                        class=" fs-6 fw-semibold mb-2 RequiredLable">Operating
                                                                        Unit</label>
                                                                    <select aria-label="Select an organzation" required
                                                                        id="org_id" name="vendor_org_id"
                                                                        data-control="select2"
                                                                        data-placeholder="organzation"
                                                                        class="form-select form-select-sm form-select-solid ">
                                                                        <option value="0" selected disabled>
                                                                            Organzations</option>
                                                                        @foreach ($orgs as $org)
                                                                            <option value="{{ $org->org_id }}">
                                                                                {{ $org->name }}
                                                                            </option>
                                                                        @endforeach
                                                                    </select>
                                                                </div>
                                                                <!--end::Input-->
                                                                <div class="col-md-3 form-group">
                                                                    <label
                                                                        class=" fs-6 fw-semibold mb-2 RequiredLable">Vendor
                                                                        Site</label>
                                                                    <!--begin::Input-->
                                                                    <input type="text"
                                                                        class="form-control mw-100 w-200px"
                                                                        name="vendor_site" placeholder="Vendor Site" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <div class="col-md-3 form-group">
                                                                    <label
                                                                        class=" fs-6 fw-semibold mb-2 RequiredLable">Vendor
                                                                        Site Name</label>
                                                                    <!--begin::Input-->
                                                                    <input type="text"
                                                                        class="form-control mw-100 w-200px"
                                                                        name="vendor_site_name"
                                                                        placeholder="Vendor Site Name" />
                                                                    <!--end::Input-->
                                                                </div>
                                                                <button type="button" data-repeater-delete=""
                                                                    class="btn btn-sm btn-icon btn-light-danger">
                                                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr088.svg-->
                                                                    <span class="svg-icon svg-icon-1">
                                                                        <svg width="24" height="24"
                                                                            viewBox="0 0 24 24" fill="none"
                                                                            xmlns="http://www.w3.org/2000/svg">
                                                                            <rect opacity="0.5" x="7.05025" y="15.5356"
                                                                                width="12" height="2"
                                                                                rx="1"
                                                                                transform="rotate(-45 7.05025 15.5356)"
                                                                                fill="currentColor" />
                                                                            <rect x="8.46447" y="7.05029" width="12"
                                                                                height="2" rx="1"
                                                                                transform="rotate(45 8.46447 7.05029)"
                                                                                fill="currentColor" />
                                                                        </svg>
                                                                    </span>
                                                                    <!--end::Svg Icon-->
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--end::Form group-->
                                                    <!--begin::Form group-->
                                                    <div class="form-group mt-5">
                                                        <button type="button" data-repeater-create=""
                                                            class="btn btn-sm btn-light-primary">
                                                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr087.svg-->
                                                            <span class="svg-icon svg-icon-2">
                                                                <svg width="24" height="24" viewBox="0 0 24 24"
                                                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <rect opacity="0.5" x="11" y="18" width="12"
                                                                        height="2" rx="1"
                                                                        transform="rotate(-90 11 18)"
                                                                        fill="currentColor" />
                                                                    <rect x="6" y="11" width="12" height="2"
                                                                        rx="1" fill="currentColor" />
                                                                </svg>
                                                            </span>
                                                            <!--end::Svg Icon-->Add another Vendor
                                                        </button>
                                                    </div>
                                                    <!--end::Form group-->
                                                </div>
                                                <!--end::Repeater-->
                                            </div>
                                            <!--end::Input group-->
                                        </div>
                                        <!--end::Card header-->
                                    </div>
                                    <!--end::Variations-->

                                    <div class="d-flex justify-content-end gap-3">
                                        <button type="reset" id="reset"
                                            class="btn btn-sm fw-bold bg-body btn-color-gray-700 btn-active-color-primary bigMainBtn grayColorForLink">{{ \App\CPU\translate('reset') }}</button>
                                        <button type="submit"
                                            class="filterBtn btn btn-sm fw-bold btn-primary bigMainBtn">{{ \App\CPU\translate('submit') }}</button>
                                    </div>
                                </div>
                            </div>
                </form>
            </div>
        </div>

    </div>
@endsection

@push('script')
    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $('#viewer').attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        $("#customFileUpload").change(function() {
            readURL(this);
        });

        $(".js-example-theme-single").select2({
            theme: "classic"
        });

        $(".js-example-responsive").select2({
            width: 'resolve'
        });
    </script>

    {{-- <script src="{{ asset('public/assets/back-end/js/spartan-multi-image-picker.js') }}"></script> --}}
    <script src="{{ asset('assets/plugins/custom/formrepeater/formrepeater.bundle.js') }}"></script>
    <script src="{{ asset('assets/js/custom/apps/ecommerce/catalog/repeater-js.js') }}"></script>
    <script type="text/javascript">
        // $(function() {
        //     $("#coba").spartanMultiImagePicker({
        //         fieldName: 'identity_image[]',
        //         maxCount: 5,
        //         rowHeight: 'auto',
        //         groupClassName: 'col-6 col-lg-4',
        //         maxFileSize: '',
        //         placeholderImage: {
        //             image: '{{ asset('public/assets/back-end/img/400x400/img2.jpg') }}',
        //             width: '100%'
        //         },
        //         dropFileLabel: "Drop Here",
        //         onAddRow: function(index, file) {

        //         },
        //         onRenderedPreview: function(index) {

        //         },
        //         onRemoveRow: function(index) {

        //         },
        //         onExtensionErr: function(index, file) {
        //             toastr.error('Please only input png or jpg type file', {
        //                 CloseButton: true,
        //                 ProgressBar: true
        //             });
        //         },
        //         onSizeErr: function(index, file) {
        //             toastr.error('File size too big', {
        //                 CloseButton: true,
        //                 ProgressBar: true
        //             });
        //         }
        //     });
        // });
        $(document).on('change', '#role_select', function() {
            var id = $(this).val();
            if (id == 19 || id == 1) {
                $('label.RequiredLable').removeClass('required');
                $('input.RequiredLable').prop('required', false);
            } else {
                if ($('.RequiredLable label').hasClass('required') == false) {
                    $('label.RequiredLable').addClass('required');
                    $('input.RequiredLable').prop('required', true);
                }

            }
        });
    </script>
@endpush