@extends('master')
@section('content')

<section>
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <!--begin::Card-->
            <div class="card">
            <div class="card-header border-0 pt-5 p-0">
            <div class="container-fluid"><span id="general_result"></span></div>
                <div class="container-fluid mt-3 text-end">
             
                <button type="button" class="btn btn-sm btn-primary" name="create_record" id="create_record"><i
                            class="fa fa-plus"></i> {{__('Add Award')}}</button>
                </div>
            </div>
                <div class="card-body py-4" > 
                    <div class="table-responsive hr-bg">
                        <table id="award-table" class="table table-row-dashed table-row-gray-300 align-middle gs-0 gy-4">
                            <thead>
                                <tr class="text-start text-muted text-uppercase fw-bolder fs-7 gs-0">
                                <th style="width: 10%">#</th>
                                    <th>{{__('Award name')}}</th>
                                    <th>{{trans('Employee')}}</th>
                                    <th>{{trans('Company')}}</th>
                                    <th>{{trans('Department')}}</th>
                                    <th>{{__('Award Date')}}</th>
                                    <th class="not-exported">{{trans('action')}}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                </div>

            </div>
        </div>
    </div>
</section>


<!--begin::Modal - Add Award-->
<div class="modal fade" id="formModal" data-keyboard="false" data-bs-backdrop="static">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-dialog-centered mw-650px">
        <!--begin::Modal content-->
        <div class="modal-content">
            <!--begin::Form-->
            <form class="form" action="javascript:void(0)" id="submitForm" enctype="multipart/form-data">

                @csrf
                <!--begin::Modal header-->
                <div class="modal-header" id="kt_modal_new_address_header">
                    <!--begin::Modal title-->
                    <h2 id="modalTitle">{{ __('Add Award') }}</h2>
                    <!--end::Modal title-->
                    <!--begin::Close-->
                    <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
                        <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                        <span class="svg-icon svg-icon-1">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1"
                                    transform="rotate(-45 6 17.3137)" fill="black" />
                                <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)"
                                    fill="black" />
                            </svg>
                        </span>
                        <!--end::Svg Icon-->
                    </div>
                    <!--end::Close-->
                </div>
                <!--end::Modal header-->
                
                <!--begin::Modal body-->
                <div class="modal-body py-10 px-lg-17">
                    <div class="row mb-5">
                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Company') }}</label>
                            <select name="company_id" id="company_id" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ __('Select Company') }}">
                                <option value=""></option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Department') }}</label>
                            <select name="department_id" id="department_id" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ __('Select Department') }}">
                                <option value=""></option>
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Employee') }}</label>
                            <select name="employee_id" id="employee_id" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ __('Select Employee') }}">
                                <option value=""></option>
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Award Type') }}</label>
                            <select name="award_type_id" id="award_type_id" class="form-select form-select-solid" data-control="select2"
                                data-placeholder="{{ __('Award Type') }}">
                                <option value=""></option>
                                @foreach($award_types as $award_type)
                                    <option value="{{ $award_type->id }}">{{ $award_type->award_name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Gift') }}</label>
                            <input type="text" class="form-control form-control-solid" name="gift" id="gift" placeholder="{{ __('Gift') }}" />
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="required fs-5 fw-bold mb-2">{{ __('Cash') }}</label>
                            <input type="text" class="form-control form-control-solid" name="cash" id="cash" placeholder="{{ __('Cash') }}" />
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ __('Award Information') }}</label>
                            <textarea class="form-control form-control-solid" id="award_information" name="award_information" rows="3"></textarea>
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ __('Award Date') }}</label>
                            <input type="text" class="form-control form-control-solid date" name="award_date" id="award_date" />
                        </div>

                        <div class="col-md-6 fv-row mb-5">
                            <label class="fs-5 fw-bold mb-2">{{ __('Award Photo') }}</label>
                            <input type="file" class="form-control form-control-solid" name="award_photo" id="award_photo" />
                            <span id="store_award_photo"></span>
                        </div>
                    </div>
                </div>
                <!--end::Modal body-->

                <!--begin::Modal footer-->
                <div class="modal-footer flex-center">
                    <!--begin::Button-->
                    <button type="submit" id="btnSubmit" class="btn btn-primary">
                        <span class="indicator-label">{{ __('Submit') }}</span>
                    </button>
                    <!--end::Button-->
                </div>
                <!--end::Modal footer-->
            </form>
            <!--end::Form-->
        </div>
    </div>
</div>
<!--end::Modal - Add Award-->




<div class="modal fade" id="award_modal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">{{__('Award Information')}}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">

                <span id="award_photo_id"></span>

                <div class="row">
                    <div class="col-md-12">

                        <div class="table-responsive">

                            <table class="table  table-bordered">

                                <tr>
                                    <th>{{trans('file.Company')}}</th>
                                    <td id="company_id_show"></td>
                                </tr>

                                <tr>
                                    <th>{{trans('file.Employee')}}</th>
                                    <td id="employee_id_show"></td>
                                </tr>

                                <tr>
                                    <th>{{trans('file.Department')}}</th>
                                    <td id="department_id_show"></td>
                                </tr>

                                <tr>
                                    <th>{{__('Award Type')}}</th>
                                    <td id="award_type_id_show"></td>
                                </tr>


                                <tr>
                                    <th>{{__('Award Information')}}</th>
                                    <td id="award_information_id"></td>
                                </tr>

                                <tr>
                                    <th>{{trans('file.Gift')}}</th>
                                    <td id="award_gift_id"></td>
                                </tr>

                                <tr>
                                    <th>{{trans('file.Cash')}}</th>
                                    <td id="award_cash_id"></td>
                                </tr>

                                <tr>
                                    <th>{{__('Award Date')}}</th>
                                    <td id="award_date_id"></td>
                                </tr>


                            </table>

                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">{{trans('file.Close')}}</button>
        </div>
    </div>
</div>

<div id="confirmModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">{{trans('file.Confirmation')}}</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <h4 align="center">{{__('Are you sure you want to remove this data?')}}</h4>
            </div>
            <div class="modal-footer">
                <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">{{trans('file.OK')}}'
                </button>
                <button type="button" class="close btn-default" data-dismiss="modal">{{trans('file.Cancel')}}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('page_script')
<script nonce="{{ $cspNonce }}">
(function($) {
    "use strict";
    $(document).ready(function() {

        // let date = $('.date');
        // date.datepicker({
        //     format: '{{ env('Date_Format_JS')}}',
        //     autoclose: true,
        //     todayHighlight: true
        // });


        let table_table = $('#award-table').DataTable({
            initComplete: function() {
                this.api().columns([1]).every(function() {
                    let column = this;
                    let select = $('<select><option value=""></option></select>')
                        .appendTo($(column.footer()).empty())
                        .on('change', function() {
                            let val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    // column.data().unique().sort().each(function (d, j) {
                    //     select.append('<option value="' + d + '">' + d + '</option>');
                    //     $('select').selectpicker('refresh');
                    // });
                });
            },
            responsive: true,
            fixedHeader: {
                header: true,
                footer: true
            },
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('awards.index') }}",
            },

            columns: [{
                    data: 'id',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'awardType',
                    name: 'awardType',
                },
                {
                    data: 'employee',
                    name: 'employee',
                },
                {
                    data: 'company',
                    name: 'company',
                },
                {
                    data: 'department',
                    name: 'department',

                },
                {
                    data: 'award_date',
                    name: 'award_date',

                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],


            "order": [],
            'language': {
                'lengthMenu': '_MENU_ {{__("records per page")}}',
                "info": '{{trans("Showing")}} _START_ - _END_ (_TOTAL_)',
                "search": '{{trans("Search")}}',
                'paginate': {
                    'previous': '{{trans("Previous")}}',
                    'next': '{{trans("Next")}}'
                }
            },
            'columnDefs': [{
                    "orderable": false,
                    'targets': [0, 6],
                }
            ],

            'lengthMenu': [
                [10, 25, 50, -1],
                [10, 25, 50, "All"]
            ],
            dom: '<"row"lfB>rtip',
            buttons: [{
                    extend: 'pdfHtml5',
                    text: '<i title="export to pdf" class="fa fa-file-pdf"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'csv',
                    text: '<i title="export to csv" class="fa fa-file-csv"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'print',
                    text: '<i title="print" class="fa fa-print"></i>',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'colvis',
                    text: '<i title="column visibility" class="fa fa-eye"></i>',
                    columns: ':gt(0)'
                },
            ],
        });
        new $.fn.dataTable.FixedHeader(table_table);
    });


    $('#create_record').on('click', function() {

        $('.modal-title').text('{{__('Add Award')}}');
        $('#action_button').val('{{trans("file.Add")}}');
        $('#action').val('{{trans("file.Add")}}');
        $('#store_award_photo').html('');
        $('#formModal').modal('show');
    });

    $('#sample_form').on('submit', function(event) {
        event.preventDefault();
        if ($('#action').val() == '{{trans('file.Add ')}}') {

            $.ajax({
                url: "{{ route('awards.store') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function(data) {
                    let html = '';
                    if (data.errors) {
                        html = '<div class="alert alert-danger">';
                        for (let count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#sample_form')[0].reset();
                        $('select').selectpicker('refresh');
                        $('.date').datepicker('update');
                        $('#award-table').DataTable().ajax.reload();
                    }
                    $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            })
        }

        if ($('#action').val() == '{{trans('file.Edit ')}}') {

            $.ajax({
                url: "{{ route('awards.update') }}",
                method: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData: false,
                dataType: "json",
                success: function(data) {
                    let html = '';
                    if (data.errors) {
                        html = '<div class="alert alert-danger">';
                        for (let count = 0; count < data.errors.length; count++) {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                    }
                    if (data.success) {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        setTimeout(function() {
                            $('#formModal').modal('hide');
                            $('.date').datepicker('update');
                            $('select').selectpicker('refresh');
                            $('#award-table').DataTable().ajax.reload();
                            $('#sample_form')[0].reset();
                        }, 2000);

                    }
                    $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        }
    });

    $(document).on('click', '.show_new', function() {

        let id = $(this).attr('id');
        $('#form_result').html('');

        let target = '{{route('awards.index')}}/' + id;

        $.ajax({
            url: target,
            dataType: "json",
            success: function(result) {

                $('#award_information_id').html(result.data.award_information);
                $('#company_id_show').html(result.company_name);
                $('#employee_id_show').html(result.employee_name);
                $('#department_id_show').html(result.department);
                $('#award_type_id_show').html(result.award_name);
                $('#award_date_id').html(result.data.award_date);
                $('#award_gift_id').html(result.data.gift);
                $('#award_cash_id').html(result.data.cash);

                $('#award_photo_id').html(
                    "<img src={{ URL::to('/public') }}/uploads/award_photos/" + result.data
                    .award_photo + " width='70'  class='img-thumbnail' />");
                $('#award_photo_id').append(
                    "<input type='hidden'  name='hidden_image' value='" + result.data
                    .award_photo + "'  />");

                $('#award_modal').modal('show');
                $('.modal-title').text("{{__('Award Info')}}");
            }
        });
    });


    $(document).on('click', '.edit', function() {

        let id = $(this).attr('id');
        $('#form_result').html('');

        let target = "{{ route('awards.index') }}/" + id + '/edit';


        $.ajax({
            url: target,
            dataType: "json",
            success: function(html) {

                $('#award_information').val(html.data.award_information);
                $('#award_date').val(html.data.award_date);
                $('#gift').val(html.data.gift);
                $('#cash').val(html.data.cash);
                $('#company_id').selectpicker('val', html.data.company_id);

                let all_departments = '';
                $.each(html.departments, function(index, value) {
                    all_departments += '<option value=' + value['id'] + '>' + value[
                        'department_name'] + '</option>';
                });
                $('#department_id').empty().append(all_departments);
                $('#department_id').selectpicker('refresh');
                $('#department_id').selectpicker('val', html.data.department_id);
                $('#department_id').selectpicker('refresh');

                let all_employees = '';
                $.each(html.employees, function(index, value) {
                    all_employees += '<option value=' + value['id'] + '>' + value[
                        'first_name'] + ' ' + value['last_name'] + '</option>';
                });
                $('#employee_id').empty().append(all_employees);
                $('#employee_id').selectpicker('refresh');
                $('#employee_id').selectpicker('val', html.data.employee_id);
                $('#employee_id').selectpicker('refresh');


                $('#award_type_id').selectpicker('val', html.data.award_type_id);

                $('#store_award_photo').html(
                    "<img src={{ URL::to('/public') }}/uploads/award_photos/" + html.data
                    .award_photo + " width='70'  class='img-thumbnail' />");
                $('#store_award_photo').append(
                    "<input type='hidden' name='hidden_image' value='" + html.data
                    .award_photo + "'  />");

                $('#hidden_id').val(html.data.id);
                $('.modal-title').text('{{trans('file.Edit ')}}');
                $('#action_button').val('{{trans('file.Edit ')}}');
                $('#action').val('{{trans('file.Edit ')}}');
                $('#formModal').modal('show');
            }
        })
    });


    let delete_id;

    $(document).on('click', '.delete', function() {
        delete_id = $(this).attr('id');
        $('#confirmModal').modal('show');
        $('.modal-title').text('{{__('DELETE Record ')}}');
        $('#ok_button').text('{{trans('file.OK ')}}');

    });


    $(document).on('click', '#bulk_delete', function() {

        let id = [];
        let table = $('#award-table').DataTable();
        id = table.rows({
            selected: true
        }).ids().toArray();
        if (id.length > 0) {
            if (confirm('{{__('Delete Selection ',['key '=>trans('file.Award ')])}}')) {
                $.ajax({
                    url: '{{route('mass_delete_awards')}}',
                    method: 'POST',
                    data: {
                        ticketIdArray: id
                    },
                    success: function(data) {
                        let html = '';
                        if (data.success) {
                            html = '<div class="alert alert-success">' + data.success +
                            '</div>';
                        }
                        if (data.error) {
                            html = '<div class="alert alert-danger">' + data.error + '</div>';
                        }
                        table.ajax.reload();
                        table.rows('.selected').deselect();
                        if (data.errors) {
                            html = '<div class="alert alert-danger">' + data.error + '</div>';
                        }
                        $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);

                    }

                });
            }
        } else {
            alert('{{__('Please select atleast one checkbox ')}}');
        }
    });


    $('.close').on('click', function() {
        $('#sample_form')[0].reset();
        $('select').selectpicker('refresh');
        $('#store_award_photo').html('');
        $('#award_photo_id').html('');
        $('.date').datepicker('update');
        $('#award-table').DataTable().ajax.reload();
    });

    $('#ok_button').on('click', function() {
        let target = "{{ route('awards.index') }}/" + delete_id + '/delete';
        $.ajax({
            url: target,
            beforeSend: function() {
                $('#ok_button').text('{{trans('file.Deleting...')}}');
            },
            success: function(data) {
                let html = '';
                if (data.success) {
                    html = '<div class="alert alert-success">' + data.success + '</div>';
                }
                if (data.error) {
                    html = '<div class="alert alert-danger">' + data.error + '</div>';
                }
                setTimeout(function() {
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(
                        300);
                    $('#confirmModal').modal('hide');
                    $('#award-table').DataTable().ajax.reload();
                }, 2000);
            }
        })
    });

    $('.dynamic').change(function() {
        if ($(this).val() !== '') {
            let value = $(this).val();
            let dependent = $(this).data('dependent');
            let _token = $('input[name="_token"]').val();
            $.ajax({
                url: "{{ route('dynamic_department') }}",
                method: "POST",
                data: {
                    value: value,
                    _token: _token,
                    dependent: dependent
                },
                success: function(result) {
                    $('#department_id').select2picker("destroy");
                    $('#department_id').html(result);
                    $('select').select2picker();

                }
            });
        }
    });

    $('.employee').change(function() {
        if ($(this).val() !== '') {
            let value = $(this).val();
            let first_name = $(this).data('first_name');
            let last_name = $(this).data('last_name');
            let _token = $('input[name="_token"]').val();
            $.ajax({
                url: "{{ route('dynamic_employee_department') }}",
                method: "POST",
                data: {
                    value: value,
                    _token: _token,
                    first_name: first_name,
                    last_name: last_name
                },
                success: function(result) {
                    $('#department_id').selectpicker("destroy");
                    $('#employee_id').html(result);
                    $('select').selectpicker();

                }
            });
        }
    });
})(jQuery);
</script>
@endsection