@extends('layout.main')
@section('content')
<section>

    <div class="container-fluid"><span id="general_result"></span></div>

    <div class="container-fluid mb-3">
        @can('store-reimbursement')
            <button type="button" class="btn btn-info" name="create_record" id="create_record">
                <i class="fa fa-plus"></i> {{ __('Add Reimbursement') }}
            </button>
        @endcan
        @can('delete-reimbursement')
            <button type="button" class="btn btn-danger" name="bulk_delete" id="bulk_delete">
                <i class="fa fa-minus-circle"></i> {{ __('Bulk delete') }}
            </button>
        @endcan
    </div>

    <div class="table-responsive">
        <table id="reimbursement-table" class="table ">
            <thead>
                <tr>
                    <th class="not-exported"></th>
                    <th>{{ __('Reimbursement Type') }}</th>
                    <th>{{ __('Company') }}</th>
                    <th>{{ __('Employee') }}</th>
                    <th>{{ __('Amount') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th class="not-exported">{{ trans('file.action') }}</th>
                </tr>
            </thead>
        </table>
    </div>
</section>

{{-- Modal Form --}}
<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 id="exampleModalLabel" class="modal-title">{{ __('Add Reimbursement') }}</h5>
                <button type="button" data-dismiss="modal" id="close" aria-label="Close" class="close"><i class="dripicons-cross"></i></button>
            </div>

            <div class="modal-body">
                <span id="form_result"></span>
                <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        {{-- Company --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ trans('file.Company') }}</label>
                                <select name="company_id" id="company_id" class="form-control selectpicker dynamic"
                                    data-live-search="true" data-live-search-style="contains"
                                    data-first_name="first_name" data-last_name="last_name"
                                    title='{{ __('Selecting', ['key' => trans('file.Company')]) }}...'>
                                    @foreach ($companies as $company)
                                        <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Employee --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ trans('file.Employee') }}</label>
                                <select name="employee_id" id="employee_id" class="selectpicker form-control"
                                    data-live-search="true" data-live-search-style="contains"
                                    title='{{ __('Selecting', ['key' => trans('file.Employee')]) }}...'></select>
                            </div>
                        </div>

                        {{-- Type --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('Reimbursement Type') }}</label>
                            <select name="reimbursement_type_id" id="reimbursement_type_id"
                                class="form-control selectpicker" data-live-search="true"
                                data-live-search-style="contains"
                                title='{{ __('Selecting', ['key' => __('Reimbursement Type')]) }}...'>
                                @foreach ($reimbursement_types as $reimbursement_type)
                                    <option value="{{ $reimbursement_type->id }}">{{ $reimbursement_type->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Amount --}}
                        <div class="col-md-6 form-group">
                            <label>{{ __('Amount') }}</label>
                            <input type="number" name="amount" id="amount" class="form-control" placeholder="{{ __('Amount') }}">
                        </div>

                        {{-- Description --}}
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>{{ trans('file.Description') }}</label>
                                <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                            </div>
                        </div>

                        {{-- Attachment --}}
                        <div class="col-md-6 form-group hide_edit">
                            <label>{{ __('Reimbursement Attachments') }} </label>
                            <input type="file" name="reimbursement_attachments" id="reimbursement_attachments" class="form-control">
                        </div>

                        {{-- Status --}}
                        <div class="col-md-6 form-group">
                            <label>{{ trans('file.Status') }}</label>
                            <select name="status" id="status" class="form-control selectpicker"
                                data-live-search="true" data-live-search-style="contains"
                                title='{{ __('Selecting', ['key' => trans('file.Status')]) }}...'>
                                @if(isset($employee->supervisor) && ($employee->supervisor == 1))
                                    <option value="first level approval">{{__('First Level Approval')}}</option>
                                    <option value="rejected">{{trans('file.Rejected')}}</option>
                                @elseif(isset($employee->dept_head) && ($employee->dept_head == 1))
                                    <option value="approved">{{trans('file.Approved')}}</option>
                                    <option value="rejected">{{trans('file.Rejected')}}</option>
                                @elseif(isset($employee->coo) && ($employee->coo == 1))
                                    <option value="approved">{{trans('file.Approved')}}</option>
                                    <option value="rejected">{{trans('file.Rejected')}}</option>
                                @else
                                    <option value="pending">{{ trans('file.Pending') }}</option>
                                    <option value="first level approval">{{ __('First Level Approval') }}</option>
                                    <option value="approved">{{ trans('file.Approved') }}</option>
                                    <option value="rejected">{{ trans('file.Rejected') }}</option>
                                @endif
                            </select>
                        </div>

                        <div class="container">
                            <div class="form-group" align="center">
                                <input type="hidden" name="action" id="action" />
                                <input type="hidden" name="hidden_id" id="hidden_id" />
                                <input type="submit" name="action_button" id="action_button"
                                    class="btn btn-warning" value="{{ trans('file.Add') }}" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>

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

{{-- Modal Show --}}
<div class="modal fade" id="travel_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">{{ __('Travel Info') }}</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <span id="travel_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="reimbursement_company_show"></td></tr>
                                <tr><th>{{ trans('file.Employee') }}</th><td id="reimbursement_employee_show"></td></tr>
                                <tr><th>{{ __('Reimbursement Type') }}</th><td id="reimbursement_type_show"></td></tr>
                                <tr><th>{{ __('Amount') }}</th><td id="reimbursement_amount_show"></td></tr>
                                <tr><th>{{ __('Description') }}</th><td id="reimbursement_description_show"></td></tr>
                                <tr><th>{{ __('Status') }}</th><td id="reimbursement_status_show"></td></tr>
                                <tr><th>{{ __('Attachment') }}</th><td><img id="reimbursement_attachment_show" width="300"></td></tr>
                            </table>
                        </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>

{{-- Modal Confirm Delete --}}
<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

@push('scripts')
<script type="text/javascript">
(function($) {
"use strict";
$(document).ready(function() {

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

    let table = $('#reimbursement-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('reimbursements.index') }}" },
        columns: [
            { data: 'id', orderable: false, searchable: false },
            { data: 'reimbursement_type', name: 'reimbursement_type' },
            { data: 'company', name: 'company' },
            { data: 'employee', name: 'employee' },
            { data: 'amount', name: 'amount' },
            { data: 'status', name: 'status' }, // server sudah kembalikan badge HTML
            { data: 'action', name: 'action', orderable: false }
        ],
        order: [],
        language: {
            lengthMenu: '_MENU_ {{ __('records per page') }}',
            info: '{{ trans('file.Showing') }} _START_ - _END_ (_TOTAL_)',
            search: '{{ trans('file.Search') }}',
            paginate: { previous: '{{ trans('file.Previous') }}', next: '{{ trans('file.Next') }}' }
        },
        columnDefs: [
            {
                orderable: false,
                // targets: [0, 6],
            },
            {
                render: function(data, type, row, meta) {
                    if (type == 'display') {
                        data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                    }
                    return data;
                },
                checkboxes: {
                    selectRow: true,
                    selectAllRender: '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                },
                targets: [0]
            }
        ],
        select: { style: 'multi', selector: 'td:first-child' },
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        dom: '<"row"lfB>rtip',
        buttons: [
            { extend: 'pdf',  text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',  exportOptions: { columns: ':visible:Not(.not-exported)', rows: ':visible' } },
            { extend: 'csv',  text: '<i title="export to csv" class="fa fa-file-text-o"></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);
});

$('#create_record').on('click', function() {
    $('.modal-title').text('{{ __('Add Reimbursement') }}');
    $('#action_button').val('{{ trans('file.Add') }}');
    $('#action').val('{{ trans('file.Add') }}');
    $('#sample_form')[0].reset();
    $('select').selectpicker('refresh');
    $('#formModal').modal('show');
});

// Submit Add/Edit
$('#sample_form').on('submit', function(event) {
    event.preventDefault();

    const isAdd = $('#action').val() == '{{ trans('file.Add') }}';
    const url    = isAdd ? "{{ route('reimbursements.store') }}" : "{{ route('reimbursements.update') }}";

    $.ajax({
        url: url,
        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 i = 0; i < data.errors.length; i++) { html += '<p>' + data.errors[i] + '</p>'; }
                html += '</div>';
            }
            if (data.success) {
                html = '<div class="alert alert-success">' + data.success + '</div>';
                if (isAdd) {
                    $('#sample_form')[0].reset();
                    $('select').selectpicker('refresh');
                    $('.date').datepicker('update');
                } else {
                    $('#formModal').modal('hide');
                }
                $('#reimbursement-table').DataTable().ajax.reload(null, false);
            }
            $('#form_result').html(html).slideDown(300).delay(5000).slideUp(300);
        }
    });
});

// Show
$(document).on('click', '.show_reimbursement', function() {
    let id = $(this).attr('id');
    $('#form_result').html('');
    let target = "{{ route('reimbursements.show', '') }}" + "/" + id;

    $.ajax({
        url: target,
        dataType: "json",
        success: function(result) {
            $('#reimbursement_type_show').html(result.data.reimbursement_type.name);
            $('#reimbursement_employee_show').html(result.data.employee.first_name + ' ' + result.data.employee.last_name);
            $('#reimbursement_company_show').html(result.data.employee.company.company_name);
            $('#reimbursement_amount_show').html(result.data.amount_formatted);
            $('#reimbursement_description_show').html(result.data.description);
            $('#reimbursement_status_show').html(result.data.status);
            $('#reimbursement_attachment_show').attr('src', result.data.attachment_url);

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

// Edit
$(document).on('click', '.edit', function() {
    let id = $(this).attr('id');
    $('#form_result').html('');

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

    $.ajax({
        url: target,
        dataType: "json",
        success: function(html) {
            $('#description').val(html.data.description);
            $('#amount').val(html.data.amount);
            $('#company_id').selectpicker('val', html.data.employee.company.id);

            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).trigger('change');

            // Set status; jika value lama tidak tersedia di opsi dropdown saat ini, fallback ke opsi pertama agar terkirim
            $('#status').selectpicker('val', html.data.status).trigger('change');
            if (!$('#status').val()) {
                const first = $('#status option:first').val();
                if (first) {
                    $('#status').selectpicker('val', first).trigger('change');
                }
            }

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

            $('#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');
        }
    })
});

// Approve / Reject sekali klik
$(document).on('click', '.approve, .reject', function () {
    const id = $(this).data('id');
    const newStatus = $(this).hasClass('approve') ? 'approved' : 'rejected';

    // Ambil data terlebih dahulu agar payload memenuhi validator controller
    $.get("{{ route('reimbursements.index') }}/" + id + "/edit", function (res) {
        $.ajax({
            url: "{{ route('reimbursements.update') }}",
            method: "POST",
            dataType: "json",
            data: {
                _token: "{{ csrf_token() }}",
                hidden_id: res.data.id,
                employee_id: res.data.employee.id,
                reimbursement_type_id: res.data.reimbursement_type_id,
                amount: res.data.amount,
                description: res.data.description,
                status: newStatus
            },
            success: function(resp) {
                if (resp.errors) {
                    let html = '<div class="alert alert-danger">';
                    for (let i=0; i<resp.errors.length; i++) html += '<p>'+resp.errors[i]+'</p>';
                    html += '</div>';
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
                if (resp.success) {
                    let html = '<div class="alert alert-success">' + resp.success + '</div>';
                    $('#general_result').html(html).slideDown(300).delay(3000).slideUp(300);
                    $('#reimbursement-table').DataTable().ajax.reload(null, false);
                }
            }
        });
    });
});

// Delete single
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') }}');
});

$('#ok_button').on('click', function() {
    let target = "{{ route('reimbursements.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');
                $('#reimbursement-table').DataTable().ajax.reload(null, false);
            }, 500);
        }
    })
});

// Bulk delete
$(document).on('click', '.close, #close', function() {
    $('#sample_form')[0].reset();
    $('select').selectpicker('refresh');
    $('.date').datepicker('update');
    $('#reimbursement-table').DataTable().ajax.reload(null, false);
});

$(document).on('click', '#bulk_delete', function() {
    let id = [];
    let table = $('#reimbursement-table').DataTable();
    id = table.rows({ selected: true }).ids().toArray();
    if (id.length > 0) {
        if (confirm('{{ __('Delete Selection', ['key' => __('Reimbursement')]) }}')) {
            $.ajax({
                url: '{{ route('mass_delete_reimbursements') }}',
                method: 'POST',
                data: { reimbursementIdArray: 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(null, false);
                    table.rows('.selected').deselect();
                    $('#general_result').html(html).slideDown(300).delay(5000).slideUp(300);
                }
            });
        }
    }
});

// Dynamic employees by company
$('.dynamic').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') }}",
            method: "POST",
            data: { value: value, _token: _token, first_name: first_name, last_name: last_name },
            success: function(result) {
                $('select').selectpicker("destroy");
                $('#employee_id').html(result);
                $('select').selectpicker();
            }
        });
    }
});

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