{{-- Extends layout --}}
@extends(getThemeBasePath())

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

@section('content')
    <form class="form" method="post" action="{{ $action }}" id="manage_form" enctype="multipart/form-data">
        @if (!empty($data['id']))
            @method('PUT')
        @endif
        @csrf

        <div class="card shadow-sm">
            <div class="card-header card-header-tabs-line nav-tabs-line-3x">
                <div class="card-toolbar">
                    <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0">
                        <li class="nav-item me-3">
                            <a class="nav-link active" data-bs-toggle="tab" href="#kt_er_tab_1">
                                <span class="nav-text font-size-lg">{{ $page_title }}</span>
                            </a>
                        </li>
                        @if(!empty($data['id']))
                        <li class="nav-item me-3">
                            <a class="nav-link" data-bs-toggle="tab" href="#kt_er_tab_history">
                                 <span class="nav-icon">
                                    <i class="fas fa-list"></i>
                                </span>
                                <span class="nav-text font-size-lg">History</span>
                            </a>
                        </li>
                        @endif
                    </ul>
                </div>
            </div>

            <!--begin::Card body-->
            <div class="card-body">
                <div class="tab-content">
                    <div class="tab-pane show active px-7" id="kt_er_tab_1" role="tabpanel">
                        @include('backend.errors')
                        <div class="row">
                            <div class="col-12">

                                @if($is_read_only)
                                    <div class="alert alert-warning mb-4">
                                        <i class="fa fa-lock me-2"></i>
                                        This record has been <strong>Finalized</strong> and is read-only. Only an Admin can edit it.
                                    </div>
                                @endif

                                <fieldset @if($is_read_only) disabled @endif>
                                    <div class="form-group row mb-3">

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">Date</label>
                                            <div class="input-group input-group-lg input-group-solid">
                                                <span class="input-group-text"><i class="la la-calendar"></i></span>
                                                <input class="form-control form-control-lg form-control-solid datepicker_past required" type="text" name="date" id="date" value="{{ old('date', $data['date'] ?? now()->format('d-m-Y')) }}" autocomplete="off" @if($is_read_only) readonly @endif />
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">Staff / Employee Name</label>
                                            @if($has_admin_access)
                                                <select class="form-control form-control-lg form-control-solid form-select required" name="staff_id" id="staff_id" data-control="select2">
                                                    <option value="">Select</option>
                                                    @foreach($users_list as $uid => $uname)
                                                        <option value="{{ $uid }}"
                                                            {{ old('staff_id', $data['staff_id'] ?? auth()->id()) == $uid ? 'selected' : '' }}>
                                                            {{ $uname }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                <input type="text" class="form-control form-control-lg form-control-solid" value="{{ $users_list[auth()->id()] ?? auth()->user()->first_name . ' ' . auth()->user()->last_name }}" disabled />
                                                <input type="hidden" name="staff_id" value="{{ auth()->id() }}" />
                                            @endif
                                        </div>

                                        @if($has_admin_access)
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left">Manager Name
                                            </label>
                                            <input type="text" class="form-control form-control-lg form-control-solid" value="{{ auth()->user()->first_name . ' ' . auth()->user()->last_name }}" disabled />
                                            <input type="hidden" name="manager_id" value="{{ auth()->id() }}" />
                                        </div>
                                        @endif

                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">Status</label>
                                            @if(!$has_admin_access && isset($data['status']) && $data['status'] == 1)
                                                <input type="text" class="form-control form-control-lg form-control-solid" value="Finalized" disabled />
                                                <input type="hidden" name="status" value="{{ $data['status'] }}" />
                                            @else
                                                <select class="form-control form-control-lg form-control-solid form-select required" name="status" id="status">
                                                    @foreach($save_list ?? [] as $val => $label)
                                                        <option value="{{ $val }}"
                                                            {{ old('status', $data['status'] ?? 0) == $val ? 'selected' : '' }}>
                                                            {{ $label }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </div>

                                        <div class="col-xl-3 col-lg-3 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left">Request Status</label>
                                            @if($has_admin_access && isset($data['status']) && $data['status'] == 1)
                                                <select class="form-control form-control-lg form-control-solid form-select" name="request_status" id="request_status">
                                                    @foreach($expense_status_list ?? [] as $val => $label)
                                                        <option value="{{ $val }}"
                                                            {{ old('request_status', $data['request_status'] ?? 0) == $val ? 'selected' : '' }}>
                                                            {{ $label }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                <input type="text" class="form-control form-control-lg form-control-solid" value="{{ $expense_status_list[$data['request_status'] ?? 0] ?? 'Pending' }}" disabled />
                                                <input type="hidden" name="request_status" value="{{ $data['request_status'] ?? 0 }}" />
                                            @endif
                                        </div>

                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 mb-3" id="rejection_reason_group" style="{{ old('request_status', $data['request_status'] ?? 0) == 2 ? '' : 'display:none;' }}">
                                            <label class="col-form-label text-lg-right text-left required">Rejection Reason</label>
                                            @if($has_admin_access)
                                                <textarea class="form-control form-control-solid" name="rejection_reason" id="rejection_reason" rows="3">{{ old('rejection_reason', $data['rejection_reason'] ?? '') }}</textarea>
                                            @else
                                                <textarea class="form-control form-control-solid" rows="3" disabled>{{ $data['rejection_reason'] ?? '' }}</textarea>
                                            @endif
                                        </div>

                                        <div class="col-xl-2 col-lg-2 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">For</label>
                                            <div class="radio-inline mt-2">
                                                @foreach(config('constant.for_expense_type') as $key => $val)
                                                    <label class="radio me-3">
                                                        <input class="form-check-input required" type="radio"
                                                            value="{{ $key }}" name="for_type" id="for_type_{{ $key }}"
                                                            {{ old('for_type', $data['for_type'] ?? '') === $key ? 'checked' : '' }} />
                                                        {{ $val }}
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3 {{ old('for_type', $data['for_type'] ?? '') === 'business' ? '' : 'd-none' }}"
                                            id="business_category_group">
                                            <label class="col-form-label text-lg-right text-left">Category</label>
                                            <select class="form-control form-control-solid form-select" name="business_category" id="business_category" data-control="select2">
                                                <option value="">Select</option>
                                                @foreach(config('constant.business_category_list') as $gN => $gV)
                                                    <option value="{{ $gN }}"
                                                        {{ old('business_category', $data['business_category'] ?? '') === $gN ? 'selected' : '' }}>
                                                        {{ $gV }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3 {{ old('for_type', $data['for_type'] ?? '') === 'participant' ? '' : 'd-none' }}" id="participant_group">
                                            <label class="col-form-label text-lg-right text-left">Participant</label>
                                            <select class="form-control form-control-lg form-control-solid form-select" name="participant_id" id="participant_id" data-control="select2">
                                                <option value="">Select</option>
                                                @foreach($client_list ?? [] as $cid => $cname)
                                                    <option value="{{ $cid }}"
                                                        {{ old('participant_id', $data['participant_id'] ?? '') == $cid ? 'selected' : '' }}>
                                                        {{ $cname }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">Description</label>
                                            <textarea class="form-control form-control-lg form-control-solid required" name="description" id="description" maxlength="2000" rows="3">{{ old('description', $data['description'] ?? '') }}</textarea>
                                        </div>
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3">
                                            <label class="col-form-label text-lg-right text-left required">Amount</label>
                                            <input type="number" class="form-control form-control-lg form-control-solid required" name="amount" id="amount" value="{{ old('amount', $data['amount'] ?? '') }}" step="0.01" min="0.01" />
                                        </div>

                                    </div>

                                    @if($has_admin_access && isset($data['status']) && $data['status'] == 1)
                                        <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-3" id="signature_pad_group" style="{{ old('request_status', $data['request_status'] ?? 0) == 1 ? '' : 'display:none;' }}">
                                            @include('backend.forms.common_signature_pad',['name' => 'manager_signature'])
                                        </div>
                                        @endif

                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-xs-12">
                                        <label class="col-form-label col-12 text-lg-right text-left">Upload Attachments</label>
                                        <input type="file" class="form-control" id="file_name" name="file_name[]" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" multiple @if($is_read_only) disabled @endif>
                                        <span class="form-text text-muted">Max file size limit is 10MB and multiple file upload is allowed.</span>
                                    </div>
                                    @if (!empty($attachments))
                                    <div class="form-group fv-row mb-7">
                                        <div class="col-lg-6 col-md-6 col-sm-12">
                                            <!--begin::Dropzone-->
                                            <div class="dropzone dropzone-queue mb-2" id="kt_dropzonejs_attachments">
                                                <!--begin::Controls-->
                                                <div class="dropzone-panel mb-lg-0 mb-5 d-none">
                                                    <a class="dropzone-select btn btn-sm btn-primary me-2">Attach files</a>
                                                    <a class="dropzone-remove-all btn btn-sm btn-light-primary">Remove All</a>
                                                </div>
                                                <!--end::Controls-->

                                                <!--begin::Items-->
                                                <div class="dropzone-items wm-200px">
                                                    <div class="dropzone-item" style="display:none">
                                                        <!--begin::File-->
                                                        <div class="dropzone-file">
                                                            <div class="dropzone-filename" title="some_image_file_name.jpg" style="width: 85%;word-break: break-all;">
                                                                <span data-dz-name>some_image_file_name.jpg</span>
                                                                <strong>(<span data-dz-size>340kb</span>)</strong>
                                                            </div>

                                                            <div class="dropzone-error" data-dz-errormessage></div>
                                                        </div>
                                                        <!--end::File-->

                                                        <!--begin::Progress-->
                                                        <div class="dropzone-progress">
                                                            <div class="progress">
                                                                <div class="progress-bar bg-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" data-dz-uploadprogress>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!--end::Progress-->

                                                        <!--begin::Toolbar-->
                                                        <div class="dropzone-toolbar">
                                                            <span class="dropzone-delete"><i class="bi bi-x fs-1"></i></span>
                                                        </div>
                                                        <!--end::Toolbar-->
                                                    </div>

                                                    @foreach ($attachments as $fileId => $fileName)
                                                    <div class="dropzone-item" id="{{$fileId}}" data-type="particularFile">
                                                        <!--begin::File-->
                                                        <div class="dropzone-file">
                                                            <div class="dropzone-filename" title="{{$fileName}}" style="width: 85%;word-break: break-all;">
                                                                <span data-dz-name><a target="_blank" href="{{ asset('uploads/expense_reimbursement/' . $data['id'] . '/' . $fileName) }}"> {{ $fileName }}</a></span>
                                                                <strong><span data-dz-size></span></strong>
                                                            </div>

                                                            <div class="dropzone-error" data-dz-errormessage></div>
                                                        </div>
                                                        <!--end::File-->
                                                        <!--begin::Toolbar-->
                                                        @if(!$is_read_only)
                                                        <div class="dropzone-toolbar">
                                                            <span class="dropzone-delete" title="Remove attachment"><i class="bi bi-x fs-1"></i></span>
                                                        </div>
                                                        @endif
                                                        <!--end::Toolbar-->
                                                    </div>
                                                    @endforeach
                                                    <!--end::Input group-->
                                                    

                                                </div>
                                                <!--end::Items-->
                                            </div>
                                        <!--end::Dropzone-->
                                        <br />
                                    </div>
                                    </div>
                                    @endif

                                    @if($has_admin_access)
                                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-3 mt-3">
                                        <label class="col-form-label text-lg-right text-left fw-bolder">Admin Note <span class="text-muted fw-normal"></span></label>
                                        <textarea class="form-control form-control-lg form-control-solid" name="admin_note" id="admin_note" maxlength="2000" rows="3">{{ old('admin_note', $data['admin_note'] ?? '') }}</textarea>
                                    </div>
                                    @endif
                                </fieldset>
                            </div>
                        </div>
                    </div>
                    
                    @if(!empty($data['id']))
                    <div class="tab-pane px-7" id="kt_er_tab_history" role="tabpanel">
                        <table class="table table-bordered align-middle" id="historyTable">
                            <thead>
                                <tr>
                                    <th>Field</th>
                                    <th>Old Value</th>
                                    <th>New Value</th>
                                    <th>Action</th>
                                    <th>Performed By</th>
                                    <th>DateTime</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(isset($history))
                                    @forelse($history as $hist)
                                    <tr>
                                        <td>{{ $hist->field_name }}</td>
                                        <td>{{ $hist->old_value ?? '-' }}</td>
                                        <td>{{ $hist->new_value ?? '-' }}</td>
                                        <td>
                                            <span class="badge bg-{{ $hist->action_type === 'create' ? 'success' : 'warning' }}">
                                                {{ ucfirst($hist->action_type) }}
                                            </span>
                                        </td>
                                        <td>{{ optional($hist->user)->name ?? '' }}</td>
                                        <td>{{ $hist->created_at->format('d-m-Y H:i') }}</td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center text-muted">No history found</td>
                                    </tr>
                                    @endforelse
                                @endif
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>

                <div class="card-footer text-right">
                    @if(!$is_read_only)
                        <button type="submit" class="btn btn-primary me-2 btn-hover-rise" id="submit_btn">Save</button>
                    @endif
                    <a href="{{ route('expense-reimbursement.index') }}">
                        <button type="button" class="btn btn-secondary btn-hover-rise">Cancel</button>
                    </a>
                    @if(!empty($data['id']))
                        <a href="{{ route('expense-reimbursement.report', $data['id']) }}" target="_blank" class="btn btn-danger btn-hover-rise ms-2">
                            <i class="fa fa-file-pdf"></i> PDF
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </form>
@endsection

@section('scripts')
@include('backend.forms.common_form_script',['name' => 'manager_signature'])
<script type="text/javascript">
$(document).ready(function () {

    // ── For-type toggle ──────────────────────────────────────
    function toggleExpenseTypeFields() {
        var type = $('input[name="for_type"]:checked').val();
        if (type === 'business') {
            $('#business_category_group').removeClass('d-none');
            $('#participant_group').addClass('d-none');
            $('#business_category').prop('required', true);
            $('#participant_id').prop('required', false).val('').trigger('change');
        } else if (type === 'participant') {
            $('#business_category_group').addClass('d-none');
            $('#participant_group').removeClass('d-none');
            $('#business_category').prop('required', false).val('').trigger('change');
            $('#participant_id').prop('required', true);
        } else {
            $('#business_category_group, #participant_group').addClass('d-none');
            $('#business_category').prop('required', false).val('').trigger('change');
            $('#participant_id').prop('required', false).val('').trigger('change');
        }
    }

    $('input[name="for_type"]').on('change', toggleExpenseTypeFields);
    toggleExpenseTypeFields();

    if ($.fn.DataTable) {
        $('#historyTable').DataTable({
            pageLength: 10,
            lengthChange: false,
            order: [],
            language: {
                search: "Search:",
                zeroRecords: "No matching records found",
                info: "Showing _START_ to _END_ of _TOTAL_ records",
                infoEmpty: "No records available"
            }
        });
    }

    // ── Signature required when Approved ────────────────────
    @if($has_admin_access)
    function checkSignatureRequired() {
        var requestStatus = parseInt($('#request_status').val());
        var $sig = $('#signature'); // depends on common_signature_pad implementation
        if (requestStatus === 1) { // Approved
            $sig.prop('required', true);
            $('#rejection_reason_group').hide();
            $('#signature_pad_group').show();
        } else if (requestStatus === 2) { // Rejected
            $sig.prop('required', false);
            $('#rejection_reason_group').show();
            $('#signature_pad_group').hide();
        } else {
            $sig.prop('required', false);
            $('#rejection_reason_group').hide();
            $('#signature_pad_group').hide();
        }
    }
    $('#request_status').on('change', checkSignatureRequired);
    checkSignatureRequired();
    @endif

    // ── jQuery Validate ──────────────────────────────────────
    $('#manage_form').validate({
        ignore: [],
        rules: {
            date: { required: true },
            staff_id: { required: true },
            for_type: { required: true },
            business_category: {
                required: function () {
                    return $('input[name="for_type"]:checked').val() === 'business';
                }
            },
            participant_id: {
                required: function () {
                    return $('input[name="for_type"]:checked').val() === 'participant';
                }
            },
            description: { required: true, maxlength: 2000 },
            amount: { required: true, number: true, min: 0.01 },
            rejection_reason: {
                required: function() {
                    return parseInt($('#request_status').val()) === 2;
                }
            }
        }
    });

    // ── Date picker (past dates only) ────────────────────────
    $(".datepicker_past").daterangepicker({
        singleDatePicker: true,
        showDropdowns: true,
        minYear: 1901,
        autoUpdateInput: false,
        autoApply: true,
        locale: { format: 'DD-MM-YYYY' },
        maxDate: new Date()
    }).on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD-MM-YYYY'));
    }).on('cancel.daterangepicker', function () {
        $(this).val('');
    });

    // ── Attachment delete (existing files) ───────────────────
    $(document).on('click', '.dropzone-delete', function () {
        var row = $(this).closest('.dropzone-item');
        var fileId = row.attr('id');
        if (!fileId) return;

        Swal.fire(deleteAlert).then(function (result) {
            if (result.value) {
                $.ajax({
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "_method": 'DELETE',
                        "id": "{{ $data['id'] ?? '' }}",
                        "type": "particularFile",
                        "file_id": fileId
                    },
                    url: "{!! route('expense-reimbursement.destroy', 1) !!}",
                    success: function (data) {
                        if (data.status) {
                            row.remove();
                            Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'File deleted successfully!',
                            confirmButtonText: 'OK'
                            });
                        }
                    }
                });
            }
        });
    });

});
</script>
@endsection