@extends('admin.layouts.leadManagement')
@section('title')
    {{ __('edit') }}
@endsection

@section('style')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css?v={{ env('CRM_VERSION') }}"
        rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('backend') }}/lead-management/css/customer-detail.css?v={{ env('CRM_VERSION') }}">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css?v={{ env('CRM_VERSION') }}" />
    <link rel="shortcut icon" href="/uploads/app/logo/3OtxeXcMv5lhQzNLERhnmclPXorAN4msV8upXbCm.png">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css?v={{ env('CRM_VERSION') }}" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css?v={{ env('CRM_VERSION') }}" />
    <style>
        .select2-container .select2-selection--single .select2-selection__rendered {
            display: block;
            padding-left: 8px;
            padding-right: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-top: 7px;

            height: 38px;
            border: 1px solid #ced4da;
            border-radius: 3px;
        }
        #saveButton_loader{
            display: none;
        }
    </style>
@endsection

@section('content')
    @if (userCan('order.create'))
        <div class="">
            <div class="row mt-3" style="width: 90%; justify-content: center; margin: auto; margin-top:20px;">
                <div class="col-md-12">
                    <div class="card">
                        

                        <div class="card-header row m-0">
                            <h3 class="card-title line-height-36 col-sm-12 col-md-6">{{ __('create') }} {{ __('Attendance') }}</h3>
                            <span class="col-sm-12 col-md-6 m-0">
                                <a href="{{ route('attendance.index') }}"
                                    class="btn bg-primary    m-0" style="width: 150px; float:right; color:white;" >
                                    <i class="fas fa-arrow-left"></i>&nbsp; {{ __('List View') }}
                                </a>
                            </span>
                        </div>
                        
                       
                        <div class="card-body">
                           <div class="row justify-content-center">
                                <div class="col-md-8">
                                    <form action="{{ route('attendance.store') }}" method="POST">
                                        @csrf
                                        <div class="row">

                                            <div class="col-md-6 col-lg-4 col-sm-12">
                                                <div class="form-group">
                                                    <label class="form-label" for="mode">{{ __('User Id') }} <small
                                                        class="text-danger">*</small></label>
                                                        <select  class="form-control select2bs4" id="user_id"  name="user_id"  >
                                                          
                                                        </select>
                                                    @error('user_id')
                                                        <p  role="alert" style="color: red;">{{ @$message }}</p>
                                                    @enderror
                                                    
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-lg-4 col-sm-12">
                                                <div class="form-group">
                                                    <label class="form-label" for="date">{{ __('Class date') }} <small
                                                        class="text-danger">*</small></label>
                                                        <input type="date" class="form-control"  id="date" name="date" value="{{ old('date') }}" >
                                                    @error('date')
                                                        <p  role="alert" style="color: red;">{{ @$message }}</p>
                                                    @enderror
                                                </div>
                                            </div>

                                            <div class="col-md-6 col-lg-4 col-sm-12">
                                                <div class="form-group">
                                                    <label class="form-label" for="attend">{{ __('Attend / Not Attend') }} <small
                                                        class="text-danger">*</small></label>
                                                    <div class=" form-switch ">
                                                        <input class="form-check-input" type="checkbox" id="attend" name="attend" data-toggle="toggle" data-on="Active" data-off="Inactive" data-onstyle="success" data-offstyle="danger" data-width="100" data-height="40" {{ old('attend') ? 'checked' : '' }}>
                                                      </div>
                                                    @error('attend')
                                                        <p  role="alert" style="color: red;">{{ @$message }}</p>
                                                    @enderror
                                                </div>
                                            </div>

                                        </div>
                                        <div class="">
                                            <button id="saveButton" onclick="save_button_loader()" class="btn btn-success" style="width: 130px;">
                                                <span class="spinner-border spinner-border-sm " id="saveButton_loader" role="status" aria-hidden="true"></span>
                                                <span class="save_text"> {{ __('Save') }} </span>
                                            </button>
                                        </div>  
                                    </form>
                                </div>
                           </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection
@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js?v={{ env('CRM_VERSION') }}"
integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js?v={{ env('CRM_VERSION') }}">
</script>
<script src="{{ asset('backend') }}/lead-management/js/common.js?v={{ env('CRM_VERSION') }}"></script>
<script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>

    

    
    <script>

        function save_button_loader(){
            $('#saveButton_loader').css('display', 'inline-block');
            $('.save_text').html('Saving...')
        }



        $(document).ready(function(){
            candidateId = "{{ old('user_id')}}";
            if (candidateId) {
                $.ajax({
                    url: '{{ route('order.searchUser') }}',
                    type: "GET",
                    dataType: 'json',
                    data: {
                        id: candidateId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(item) {
                        console.log(item);
                        $('.select2bs4').append(new Option(`${item.name} (${item.id})`, item.id,
                            true, true)).trigger('change');
                    }
                });
            }
        });

        

        $('.select2bs4').select2({
            theme: 'bootstrap4',
            ajax: {
                url: '{{ route('order.searchUser') }}',
                dataType: 'json',
                type: "GET",
                quietMillis: 50,
                data: function (term) {
                    return {
                        term : term,
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                id: item.user_id,
                                text: `${item.name} (${item.user_id})`
                            }
                        })
                    };
                }
            }
        });

        // $('.select2bs4').select2({
        //     theme: 'bootstrap4',
        //     ajax: {
        //         url: '{{ route('order.searchCandidate') }}',
        //         dataType: 'json',
        //         type: "GET",
        //         quietMillis: 50,
        //         data: function (term) {
        //             return {
        //                 term : term,
        //             };
        //         },
        //         processResults: function (data) {
        //             return {
        //                 results: $.map(data, function (item) {
        //                     return {
        //                         id: item.user_id,
        //                         text: `${item.name} (${item.user_id})`
        //                     }
        //                 })
        //             };
        //         }
        //     }
        // });
    </script>
    <script>
        // $('#filterForm').on('change', function() {
        //     $(this).submit();
        // })

    //     $('.select2bs4').select2({
    //         theme: 'bootstrap4',
    //         ajax: {
    //             url: '{{ route('order.searchCandidate') }}',
    //             dataType: 'json',
    //             type: "GET",
    //             quietMillis: 50,
    //             data: function (term) {
    //                 return {
    //                     term : term,
    //                 };
    //             },
    //             processResults: function (data) {
    //                 return {
    //                     results: $.map(data, function (item) {
    //                         return {
    //                             id: item.user_id,
    //                             text: `${item.name} (${item.user_id})`
    //                         }
    //                     })
    //                 };
    //             }
    //         }
    //     });

    //     for(i=0;i<7;i++){
    //         ClassicEditor
    //         .create(document.querySelector(`#editor${i}`))
    //         .catch(error => {
    //             console.error(error);
    //         });
    //     }
    //     $('#plan_category').on('change', function() {
    //         $('.priceToggle').hide();
    //         var plan_category_id = $(this).find('option:selected').val();
    //         if(plan_category_id != '' && plan_category_id != undefined){
    //             $.ajax({
    //                 url: "{{ route('order.plan-details',['plan_category_id' => ':plan_category_id']) }}",
    //                 type: 'GET',
    //                 data: {
    //                     plan_category_id: plan_category_id
    //                 },
    //                 success: function(res) {
    //                     $('#price').val(res)
    //                     $('.priceToggle').show();
    //                 }
    //             });   
    //         }
    //     });
        
    </script>
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <style>
        .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        
    </style>
    
@endsection