@extends('lay.dnekcab.retsam')

@section('css')
<style>
    .select2-container{
        z-index: 1100;
    }
</style>
@endsection

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <!-- card-header -->
                            <!--cenario 1: only header, 2:header and add button, 3:header and print, other:header , add button and prin. type:both[pdf,excel], type:[pdf], type:[excel] -->
                            <x-card-header 
                                :scenario="'2'"
                                :pageTitle="$page_title"
                                :permission="'IDCard - Add New ID Card'"
                                :buttonLabel="__('card.idcard.add_new_idcard')"
                                :buttonClass="'addNewIDCardBtn'"
                                :totalCount="$idCards->total()"
                                :modal="'add-idcard-modal'"
                            />
    
                            <div class="mt-3">
                                {{-- Search --}}
                                <x-search-filter 
                                    :rows="1" 
                                    :inputs-per-row="4" 
                                    :col-md-classes="[
                                        ['col-md-3', 'col-md-4','col-md-4','col-md-1']
                                    ]" 
                                    :input-config="[
                                        [
                                            ['type' => 'text'], 
                                            ['type' => 'select', 'options' => $employees],
                                            ['type' => 'text', 'customClass' => 'datepickers'],
                                            ['type' => 'select', 'options' => $paginationArray]
                                        ]
                                    ]"
                                    :names="[
                                        [
                                        'term_search_name',
                                        'employee_search_name',
                                        'date_search_name',
                                        'pagination_search_name',
                                        ]
                                    ]"
                                    :ids="[
                                        [
                                        'term_search_id',
                                        'employee_search_id',
                                        'date_search_id',
                                        'pagination_search_id',
                                        ]
                                    ]"
                                    :placeholders="[
                                        [
                                        __('card.id_number'). ' | ' .__('card.description'),
                                        __('card.employee'),
                                        __('card.date'),
                                        key($paginationArray) ? key($paginationArray) : __('global.pagination')
                                        ]
                                    ]"
                                    form-action="{{ route('allIDCard') }}"
                                    report-type="both" 
                                    :lang="$lang"
                                />
                                                
                                <!-- end Search -->
                            </div>

                            <div class="card">
                                <div class="card-body pe-0 ps-0" id="data_content">
                                    @include('dnekcab.nimda.cards.idcard.idcardList')
                                </div>
                            </div>

                        </div>
                        <!-- /.card-header -->
                    </div>
                </div>
            </div>

        </div> <!-- container-fluid -->
    </div>

    <!-- Add IdCard  modal -->
    <div class="modal fade add-idcard-modal" id="add-idcard-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            @csrf
            <form id="addIDCardForm" style="display: contents;" action="{{ route('add_idcard')}}" method="POST" enctype="multipart/form-data">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="add-idcard-title">{{ __('card.idcard.add_new_idcard')}}</h5>
                        <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-12 mb-3">
                            <div class="row">
                                <div class="col-12 mb-2">
                                    <label>{{ __('employee.location_type') }}</label><br>
                                    <select id="employee_type" name="employee_type" class="form-control">
                                        <option value="office">{{ __('employee.office') }}</option>
                                        <option value="outoffice">{{ __('employee.outoffice') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-12">
                                    <label for="employee_id" class="form-label">{{ __('card.employee') }} <span class="required">*</span></label>
                                    <select name="r_employee_id" id="employee_id" class="form-control select2">
                                        <option value="">--{{__('global.select')}}--</option>
                                    </select>
                                </div>
                            </div>
                        </div>
        
                        <div id="partial_view"></div>
    
                    </div>
                    <div class="modal-footer" id="footer-button"></div>
                </div><!-- /.modal-content -->
            </form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Edit IdCard  modal -->
    <div class="modal fade edit-idcard-modal" id="edit-idcard-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            @csrf
            <form id="updateIDCardForm" style="display: contents;" action="{{ route('update_idcard')}}" method="POST" enctype="multipart/form-data">
                <input type="hidden" class="form-control edit_idcard_id" name="edit_idcard_id" id="edit_idcard_id"/>
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="edit-idcard-title">{{ __('card.idcard.edit_idcard')}}</h5>
                        <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="col-12 mb-3">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="employee-info alert alert-info" id="employee-info"></div>
                                </div>
                            </div>
                        </div>
        
                        <div class="col-12 mb-3">
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="edit_issueDate" class="form-label">{{ __('card.issue_date') }} <span class="required">*</span></label>
                                    <input type="text" class="form-control edit_issueDate datepickers" name="r_edit_issueDate" id="edit_issueDate" placeholder="{{ __('card.issue_date') }}" autocomplete="off"/>
                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                </div>
                        
                                <div class="col-md-6">
                                    <label for="edit_expiryDate" class="form-label">{{ __('card.expiry_date') }} <span class="required">*</span></label>
                                    <input type="text" class="form-control edit_expiryDate datepickers" name="r_edit_expiryDate" id="edit_expiryDate" placeholder="{{ __('card.expiry_date') }}" autocomplete="off"/>
                                    <span class="text-danger hiddens">{{ __('global.required') }}</span>
                                    <span class="edit_expiryDate_smaller hiddens required" id="edit_expiryDate_smaller"><span class="required">*</span> {{ __('card.no_smaller_issue_date') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-2">
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="edit_description" class="form-label">{{ __('leave.description') }}</label>
                                    <textarea name="edit_description" id="edit_description" cols="5" rows="2" class="form-control"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="row">
                                <div class="col-md-4">
                                    <label for="attachment" class="form-label">{{ __('card.attachment') }} <span class="editIDCardAttachmentDiv hiddens"><a href="" class="editAttachment" target="_blank"></a></span></label>
                                    <div class="custom-file">
                                        <input type="file" class="form-control" name="edit_attachment" onchange="setFileNameToFileInput(event);" id="edit_attachment" accept=".jpg, .jpeg, .png, .pdf" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('global.close') }}">{{ __('global.cancel') }} </button>
                        <button type="submit" class="btn btn-primary" id="updateIDCardBtn">{{ __('global.save') }}</button>
                    </div>
                </div><!-- /.modal-content -->
            </form>
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    
    <!-- Deactive Confirm modal -->
    <div class="modal fade" id="deactiveModal" tabindex="-1" aria-labelledby="deactiveModalLabel" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="deactiveModalLabel">{{ __('employee.deactive') }}</h5>
            <button type="button" class="btn-close confrim-m{{ app()->getLocale() == 'en' ? 'l' : 'r' }}" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">{{ __('global.are_you_sure_want_to_proceed') }}</div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('global.cancel') }}</button>
            <button type="button" class="btn btn-danger" id="confirmButton">{{ __('global.confirm') }}</button>
            </div>
        </div>
        </div>
    </div>

@endsection

@section('js')
    <!-- jquery step -->
    <script src="{{asset('assets/libs/jquery-steps/build/jquery.steps.min.js')}}"></script>

    <!-- form wizard init -->
    <script src="{{asset('assets/dnekcab/js/pages/form-wizard.init.js')}}"></script>
    <script type="text/javascript">
        var flag = 1;
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip();

            $('#employee_id').on('change', function() {// load idcard form details if filled out
                var responsiblePerson = $(this).val();
                if(responsiblePerson != ''){

                    $.ajax({
                        url: "{{ route('load_idcard_view') }}",
                        method: "GET",
                        data: { option: responsiblePerson },
                        success: function(response) {
                            $('#partial_view').html(response.viewMain);
                            $('#footer-button').html(response.viewButton);
                            $(".datepickers").hijriDatePicker({
                                hijri:true,
                                showSwitcher:false,
                                isRTL:true,
                                timeZone:'Etc/UTC'
                            });
                        }
                    });

                } else {
                    $('#partial_view').html("<div class='alert alert-danger' role='alert'><i class='fa fa-exclamation-triangle' aria-hidden='true'></i>"+selectEmployeeFirst+"</div>");
                    $('#footer-button').html('');
                }
            });

            $(document).on("submit", '#addIDCardForm', function(e){// add new leave in the system
                e.preventDefault();

                if(!validateForm('addIDCardForm')){
                    return false;
                }

                var employee_id = $('#employee_id').val();
                var issue_date = $('#issueDate').val();
                var expiry_date = $('#expiryDate').val();

                var issue_dateSize = moment(issue_date, 'iYYYY-iMM-iDD');
                var expiry_dateSize = moment(expiry_date, 'iYYYY-iMM-iDD');

                var description = $('#description').val();

                if (expiry_dateSize.isBefore(issue_dateSize)) {
                    $('#expiryDate_smaller').show();
                    return false;
                } else {
                    $('#expiryDate_smaller').hide();
                }

                var fileInput = document.getElementById("attachment");
                var attachment = fileInput.files[0];

                var formData = new FormData();

                formData.append('employee_id', employee_id);
                formData.append('issue_date', issue_date);
                formData.append('issue_date', issue_date);
                formData.append('expiry_date', expiry_date);
                formData.append('description', description); 
                formData.append('attachment', attachment);
                formData.append('_token', "{{ csrf_token() }}");

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: new FormData(this),
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        if(result.status == 'success'){
                            $('#add-idcard-modal').modal('hide');
                            toastr.options =
                            {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(result.message);
                            $("#addIDCardForm")[0].reset();
                            setTimeout(function() {
                                    window.location.href = '{{ route("allIDCard") }}';
                            }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second
                        } else {
                            toastr.options =
                            {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(result.message);
                        }
                    },
                    error:function(result){
                        console.log(result, 'error');
                        var errors = result.responseJSON;
                        toastr.options =
                        {
                        "closeButton" : true,
                        "progressBar" : true
                        }
                        toastr.error(result.message);
                    }
                });
  
            });

            $(document).on("click", ".editBtn", function(){
                var id = $(this).attr('data-id');
                $('#edit_idcard_id').val(id);
                $.ajax({
                    url: "{{ route('fetchIDCard') }}",
                    method: "GET",
                    data: {
                        id: id,
                    },
                    success: function(response) {
                        // Handle the success response
                        if(response){
                            $('#employee-info').text(response.employee_details);
                            $('#edit_issueDate').val(response.issue_date);
                            $('#edit_expiryDate').val(response.expiry_date);
                            $('#edit_description').val(response.description)

                            if(response.attachment != ''){
                                $('.editAttachment').attr('href', '/storage/attachment/card/idcard/document/'+response.attachment);
                                $('.editAttachment').text(response.attachment);
                                $('.editIDCardAttachmentDiv').show();
                            } else {
                                $('.editAttachment').attr('href', '');
                                $('.editAttachment').text('');
                                $('.editIDCardAttachmentDiv').hide();
                            }

                            $('#edit-idcard-modal').modal('show');
                            
                        } else {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(response);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle the error response
                        console.error('Form submission failed');
                        console.error(error);
                    }
                });
            });

            $(document).on("submit", "#updateIDCardForm", function(e){
                e.preventDefault();

                if(!validateForm('updateIDCardForm')){
                    return false;
                }

                var formData = new FormData(this);

                $.ajax({
                    url: $(this).attr('action'),
                    type: "POST",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success: function(response) {
                        if(response.status == 'success'){
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.success(response.message);
                            $('#edit-idcard-modal').modal('hide');
                            setTimeout(function() {
                                window.location.href = '{{ route("allIDCard") }}';
                            }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                        } else {
                            console.log(response);
                            toastr.options = {
                                "closeButton" : true,
                                "progressBar" : true
                            }
                            toastr.error(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle error response
                        toastr.options = {
                            "closeButton" : true,
                            "progressBar" : true
                        }
                        toastr.error(error);
                    }
                });
            });

            $(document).on('change', '#employee_type', function(e) {
                var access_token = $("#access_token").val();
                var is_in_office = $("#employee_type option:selected").val();

                $.ajax({
                    type: "GET",
                    url: "{{ route('getOfficeTypeEmployee')}}",
                    data: { 
                        access_token: access_token,
                        is_in_office: is_in_office,
                        type: 'idcard'
                    },
                    headers: {
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                    },
                    success:function(result){
                        $('#employee_id').html(result.content);
                        $('#employee_id').trigger('change');
                    },
                    error:function(result){
                        var errors = result.responseJSON;
                        $('#employee_id').html(errors);
                    }
                });
            });

            $('#employee_type').trigger('change');

            // Deactive Event
            $(document).on("click", ".deactiveBtn", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var idcard_id = $(this).attr('data-id');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/card/id-card/' + newRoute;
                
                // Show the confirmation modal
                $("#deactiveModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { idcard_id: idcard_id },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#deactiveModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                    location.reload(); // Refresh the current page
                                }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second)
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#deactiveModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });

            $(document).on("click", ".deleteButton", function() {
                // Store the row element and the record ID (or any other relevant data)
                var $row = $(this).closest("tr");
                var id = $(this).attr('data-id');
                var originalRoute = $(this).attr('data-url');
                
                var newRoute = originalRoute.replace(/_route/g, '').replace(/s/g, '');
                // Construct the URL using the new route
                var urllink = '/hr/card/id-card/' + newRoute;
                
                // Show the confirmation modal
                $("#confirmModal").modal("show");

                // Add a click event listener to the "Confirm" button
                $("#confirmButton").off("click").on("click", function() {
                    // Perform AJAX request to delete the record
                    $.ajax({
                        url: urllink,
                        type: "POST",
                        data: { id: id },
                        headers: {
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"  // Set the CSRF token in the request headers
                        },
                        success: function(response) {
                            if(response.status == 'success'){
                                $row.remove();// Remove the row from the table
                                $("#confirmModal").modal("hide"); // Hide the confirmation modal
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.success(response.message);
                                setTimeout(function() {
                                        window.location.href = '{{ route("allIDCard") }}';
                                }, 2000); // 2 seconds in milliseconds (1000 milliseconds = 1 second
                            } else {
                                toastr.options =
                                {
                                "closeButton" : true,
                                "progressBar" : true
                                }
                                toastr.error(response.message);
                            }
                        },
                        error: function(error) {
                            toastr.options =
                            {
                            "closeButton" : true,
                            "progressBar" : true
                            }
                            toastr.error(error);
                            $("#confirmModal").modal("hide"); // Hide the confirmation modal
                        }
                    });
                });
            });
        });
    </script>
@endsection