@extends('Admin.layout')
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <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>
                Add 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="addAdvanceSalaryForm" action="{{ route('storeAdvanceSalary') }}" method="POST">
                    @csrf
                    <h6>Advance Salary</h6>


                    <div class="col-lg-12 mt-2">
                        <label class="form-label">Branch</label>
                        <select name="branch_id" id="branch_id" class="form-select">
                            <option value="">Select Branch</option>

                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->branch_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('branch_id')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-lg-12 mt-2">
                        <label class="form-label">User ID</label>

                        <select name="id" id="staff_id" class="form-select">
                            <option value="">Select User</option>
                        </select>

                        @error('id')
                            <div class="text-danger small">{{ $message }}</div>
                        @enderror
                    </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" placeholder="₹0.00"
                            value="{{ old('amount') }}">

                        <small class=" d-block mt-1">
                            Total Salary Till Today:
                            <span id="total_salary" class="text-danger">₹ 0.00</span>
                        </small>

                        <small class="text-danger error-msg" id="error_amount"></small>

                        @error('amount')
                            <small class="text-danger validation-amount">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>
                    <div class="col-lg-12 mb-2">
                        <label class="form-label">Paid Date</label>

                        {{-- <input type="date" name="date" id="paid_date" class="form-control"
                            value="{{ old('paid_date', date('Y-m-d')) }}"> --}}

                        <input type="text" name="date" id="paid_date" class="form-control" placeholder="DD/MM/YYYY"
                            value="{{ old('paid_date', date('Y-m-d')) }}">

                        <small class="text-muted">Default: Today Date</small>
                    </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" placeholder="Message"
                            value="{{ old('remark') }}">

                        <small id="error_remark" class="text-danger error-msg"></small>

                        @error('remark')
                            <small class="text-danger validation-remark">
                                {{$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://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>


    <script>
        document.addEventListener('DOMContentLoaded', function () {

            flatpickr("#paid_date", {
                dateFormat: "Y-m-d",
                altInput: true,
                altFormat: "d/m/Y",
                maxDate: new Date(),
                allowInput: true,
                defaultDate: "{{ date('Y-m-d') }}"
            });

            // =========================
            // Choices Init
            // =========================
            const staffChoice = new Choices('#staff_id', {
                searchEnabled: true,
                itemSelectText: '',
                shouldSort: false,
                searchPlaceholderValue: 'Type User ID or Name'
            });

            // =========================
            // Branch Change → Load Staff
            // =========================
            document.getElementById('branch_id').addEventListener('change', function () {

                let branchId = this.value;

                // clear old data
                staffChoice.clearStore();

                if (!branchId) {
                    staffChoice.setChoices([{
                        value: '',
                        label: 'Select User',
                        selected: true
                    }], 'value', 'label', true);
                    return;
                }

                $.ajax({
                    url: "{{ route('getBranchStaff') }}",
                    type: "GET",
                    data: { branch_id: branchId },

                    success: function (res) {

                        if (res.status && res.data.length > 0) {

                            staffChoice.setChoices(
                                res.data.map(staff => ({
                                    value: staff.id,
                                    label: staff.user_id + ' - ' + staff.name
                                })),
                                'value',
                                'label',
                                true
                            );

                        } else {
                            staffChoice.setChoices([{
                                value: '',
                                label: 'No Staff Found',
                                selected: true
                            }], 'value', 'label', true);
                        }
                    }
                });
            });

            // =========================
            // Staff Change → Fetch Advance Salary
            // =========================
            document.getElementById('staff_id').addEventListener('change', function () {

                let staffId = this.value;

                if (!staffId) {
                    document.getElementById('total_salary').innerText = '₹ 0.00';
                    return;
                }

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

                    success: function (res) {

                        if (res.status && res.data) {

                            document.getElementById('total_salary').innerText =
                                '₹ ' + Number(res.data.available_salary)
                                    .toLocaleString('en-IN');

                        } else {
                            document.getElementById('total_salary').innerText = '₹ 0.00';
                        }
                    },

                    error: function () {
                        document.getElementById('total_salary').innerText = '₹ 0.00';
                    }
                });
            });

        });
    </script>
@endsection