@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
    .dt-search {
        display: none;
    }

    .is-invalid {
        border: 2px solid red !important;
    }
</style>
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('advance_salary') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                Edit Advance Salary
            </h5>
        </div>
    </div>

    <div class="row d-flex justify-content-center">
        <div class="col-lg-6">
            <div class="card p-4 m-2 mt-0">
                <form id="updateAdvanceForm" method="POST"
                    action="{{ route('update_advance_salary', $advancesalary->id) }}">
                    @csrf

                    <h6>Advance Salary</h6>
                    <input type="hidden" id="advance_id" value="{{ $advancesalary->id }}">
                    <div class="col-lg-12 mt-2 mb-2">
                        <label class="form-label">Enter ID</label>
                        <input type="text" name="id" id="form_staff_id" class="form-control"
                            value="{{ $advancesalary->staff->user_id }}" placeholder="Staff ID" readonly>
                        <small id="error_id" class="text-danger error-msg"></small>
                    </div>
                    <div class="col-lg-12 mt-2 mb-2">
                        <label class="form-label">Staff Name</label>
                        <input type="text" name="name" id="staff_name" class="form-control"
                            value="{{ $advancesalary->staff->name }}" readonly>
                        <small id="error_name" class="text-danger error-msg"></small>
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Select Branch</label>
                        <select name="branch" id="branch" class="form-select" readonly>
                            <option value="">Select Branch</option>
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}" {{ $advancesalary->staff->branch_id == $branch->id ? 'selected' : '' }}>{{ $branch->branch_name }} - {{ $branch->place }}
                                </option>
                            @endforeach
                        </select>
                        <small id="error_branch" class="text-danger error-msg"></small>
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Enter Amount</label>
                        <input type="text" name="amount" id="amount"
                            class="form-control @error('amount') is-invalid @enderror"
                            value="{{ old('amount', $advancesalary->amount) }}">


                        @error('amount')
                            <small class="text-danger validation-amount">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Remark</label>
                        <input type="text" name="remark" id="remark"
                            class="form-control @error('remark') is-invalid @enderror"
                            value="{{ old('remark', $advancesalary->remark) }}">


                        @error('remark')
                            <small class="text-danger validation-remar">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>

                    <div class="form-actions mt-4 d-flex gap-3 justify-content-center">

                        <button type="reset" class="btn btn-label-secondary me-2">Discard</button>
                        <button type="submit" class="btn btn-primary" id="finalSubmit">
                            Submit
                        </button>
                    </div>
                </form>

            </div>
        </div>

    </div>


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    {{--
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --}}
    <script>
        $(document).ready(function () {


            $('.form-control, .form-select').on('keyup change', function () {
                $(this).removeClass('is-invalid');

                let id = $(this).attr('id');
                $('#error_' + id).text('');
            });
            $('.form-control').on('input', function () {

                $(this).removeClass('is-invalid');

                let id = $(this).attr('id');

                $('#error_' + id).text('');

                $('.validation-' + id).hide();
            });


            $('#form_staff_id').on('blur', function () {

                let staffId = $(this).val().trim();
                if (!staffId) return;

                $.ajax({
                    url: "{{ route('fetchStaffadvance') }}",
                    type: "GET",
                    data: { id: staffId },

                    success: function (res) {
                        if (res.status) {
                            $('#staff_name').val(res.data.name);
                            $('#branch').val(res.data.branch_id);
                        } else {
                            $('#staff_name').val('');
                            $('#branch').val('');
                            showToast(res.message, "bg-danger");
                        }
                    },

                    error: function () {
                        $('#staff_name').val('');
                        $('#branch').val('');
                        showToast("Invalid Staff ID", "bg-danger");
                    }
                });
            });






            // =========================
            // UPDATE ADVANCE SALARY
            // =========================
            // $('#finalSubmit').on('click', function () {

            //     let btn = $(this);
            //     let originalText = btn.html();

            //     $('.form-control').removeClass('is-invalid');
            //     $('.error-msg').text('');

            //     btn.html('Updating...');

            //     $.ajax({
            //         url: "{{ route('update_advance_salary', $advancesalary->id) }}",
            //         type: "POST",
            //         data: {
            //             _token: $('meta[name="csrf-token"]').attr('content'),
            //             amount: $('#amount').val().trim(),
            //             remark: $('#remark').val().trim()
            //         },

            //         success: function (res) {

            //             if (res.status) {
            //                 showToast(res.message, "bg-success");

            //                 setTimeout(() => {
            //                     window.location.href = "{{ route('advance_salary') }}";
            //                 }, 1000);

            //             } else {
            //                 showToast(res.message, "bg-danger");
            //             }

            //             btn.html(originalText);
            //         },

            //         error: function (xhr) {

            //             if (xhr.status === 422) {
            //                 let res = xhr.responseJSON;

            //                 showToast(res.message, "bg-danger");

            //                 $.each(res.errors, function (key, value) {
            //                     $('#' + key).addClass('is-invalid');
            //                     $('#error_' + key).text(value[0]);
            //                 });

            //             } else {
            //                 showToast("Server Error", "bg-danger");
            //             }

            //             btn.html(originalText);
            //         }
            //     });
            // });

        });
    </script>

    <script>
        document.getElementById("updateAdvanceForm").addEventListener("submit", function () {

            let btn = this.querySelector("button[type='submit']");

            btn.disabled = true;
            btn.innerHTML = "Updating...";

        });
    </script>
@endsection