@extends('Branch.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 class="mb-0">

                <a href="{{ route('branch.advance_salary') }}" class="btn btn-icon bg-white me-2"
                    style="box-shadow: 0 9px 12px -2px #66328E1F;">

                    <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">

                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                        <path d="M15 6l-6 6l6 6" />
                    </svg>

                </a>

                Add Advance Salary
            </h5>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 col-sm-12">

            <div class="card p-4 m-2 mt-0">

                <form id="addAdvanceSalaryForm" action="{{ route('branch.storeAdvanceSalary') }}" method="POST">

                    @csrf

                    <h6 class="mb-3">Advance Salary</h6>

                    {{-- Branch --}}
                    <div class="mb-3">
                        <label for="branch_name" class="form-label">
                            Branch
                        </label>

                        <input type="hidden" name="branch_id" value="{{ $branch->id }}">

                        <input type="text" id="branch_name" class="form-control" value="{{ $branch->branch_name }}"
                            readonly>

                        @error('branch_id')
                            <div class="text-danger small mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Staff --}}
                    <div class="mb-3">
                        <label for="staff_id" class="form-label">
                            User ID
                            <span class="text-danger">*</span>
                        </label>

                        <select name="id" id="staff_id" class="form-select @error('id') is-invalid @enderror" required>

                            <option value="">Select User</option>

                            @foreach ($staffs as $staff)
                                <option value="{{ $staff->id }}" {{ (string) old('id') === (string) $staff->id ? 'selected' : '' }}>

                                    {{ $staff->user_id }} - {{ $staff->name }}

                                </option>
                            @endforeach

                        </select>

                        @error('id')
                            <div class="text-danger small mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Amount --}}
                    <div class="mb-3">
                        <label for="amount" class="form-label">
                            Enter Amount
                            <span class="text-danger">*</span>
                        </label>

                        <input type="number" name="amount" id="amount"
                            class="form-control @error('amount') is-invalid @enderror" placeholder="₹0.00"
                            value="{{ old('amount') }}" min="1" step="0.01" required>

                        <small class="d-block mt-1">
                            Total Salary Till Today:

                            <span id="total_salary" class="text-danger">
                                ₹ 0.00
                            </span>
                        </small>

                        <small id="salary_details" class="d-block text-muted mt-1"></small>

                        <small id="error_amount" class="text-danger d-block mt-1"></small>

                        @error('amount')
                            <small class="text-danger d-block mt-1">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>

                    {{-- Paid Date --}}
                    <div class="mb-3">
                        <label for="paid_date" class="form-label">
                            Paid Date
                            <span class="text-danger">*</span>
                        </label>

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

                        <small class="text-muted">
                            Default: Today Date
                        </small>

                        @error('date')
                            <div class="text-danger small mt-1">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    {{-- Remark --}}
                    <div class="mb-3">
                        <label for="remark" class="form-label">
                            Remark
                        </label>

                        <input type="text" name="remark" id="remark"
                            class="form-control @error('remark') is-invalid @enderror" placeholder="Message" maxlength="255"
                            value="{{ old('remark') }}">

                        @error('remark')
                            <small class="text-danger d-block mt-1">
                                {{ $message }}
                            </small>
                        @enderror
                    </div>

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

                        <button type="button" class="btn btn-label-secondary" id="discardButton">
                            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/flatpickr"></script>


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

            const form = document.getElementById('addAdvanceSalaryForm');
            const staffSelect = document.getElementById('staff_id');
            const amountInput = document.getElementById('amount');
            const totalSalaryElement = document.getElementById('total_salary');
            const salaryDetailsElement = document.getElementById('salary_details');
            const amountErrorElement = document.getElementById('error_amount');
            const discardButton = document.getElementById('discardButton');
            const submitButton = document.getElementById('finalSubmit');

            let availableSalary = 0;

            /*
            |--------------------------------------------------------------------------
            | Choices.js
            |--------------------------------------------------------------------------
            */
            const staffChoice = new Choices(staffSelect, {
                searchEnabled: true,
                itemSelectText: '',
                shouldSort: false,
                allowHTML: false,
                searchPlaceholderValue: 'Type User ID or Name',
                noResultsText: 'No staff found',
                noChoicesText: 'No staff available',
                placeholder: true,
                placeholderValue: 'Select User'
            });

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

            /*
            |--------------------------------------------------------------------------
            | Money Formatter
            |--------------------------------------------------------------------------
            */
            function formatMoney(value) {
                return Number(value || 0).toLocaleString('en-IN', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            /*
            |--------------------------------------------------------------------------
            | Reset Salary Display
            |--------------------------------------------------------------------------
            */
            function resetSalaryDisplay() {
                availableSalary = 0;

                totalSalaryElement.innerText = '₹ 0.00';
                salaryDetailsElement.innerText = '';
                amountErrorElement.innerText = '';

                amountInput.removeAttribute('max');
            }

            /*
            |--------------------------------------------------------------------------
            | Fetch Staff Salary
            |--------------------------------------------------------------------------
            */
            function fetchStaffSalary(staffId) {

                resetSalaryDisplay();

                if (!staffId) {
                    return;
                }

                totalSalaryElement.innerText = 'Loading...';

                $.ajax({
                    url: "{{ route('branch.fetchStaffadvance') }}",
                    type: "GET",
                    dataType: "json",

                    data: {
                        id: staffId
                    },

                    success: function (res) {

                        console.log('Staff salary response:', res);

                        if (!res.status || !res.data) {
                            resetSalaryDisplay();

                            toastr.error(
                                res.message || 'Salary details not found.'
                            );

                            return;
                        }

                        const totalSalary = Number(
                            res.data.total_salary || 0
                        );

                        const totalAdvance = Number(
                            res.data.advance_taken || 0
                        );

                        availableSalary = Number(
                            res.data.available_salary || 0
                        );

                        totalSalaryElement.innerText =
                            '₹ ' + formatMoney(availableSalary);

                        salaryDetailsElement.innerText =
                            'Earned: ₹' + formatMoney(totalSalary) +
                            ' | Advance Taken: ₹' + formatMoney(totalAdvance);

                        amountInput.setAttribute(
                            'max',
                            availableSalary.toFixed(2)
                        );
                    },

                    error: function (xhr) {

                        console.error(
                            'Fetch salary error:',
                            xhr.responseJSON || xhr.responseText
                        );

                        resetSalaryDisplay();

                        const message =
                            xhr.responseJSON?.message ||
                            'Unable to fetch staff salary.';

                        toastr.error(message);
                    }
                });
            }

            /*
            |--------------------------------------------------------------------------
            | Staff Change
            |--------------------------------------------------------------------------
            */
            staffSelect.addEventListener('change', function () {
                fetchStaffSalary(this.value);
            });

            /*
            |--------------------------------------------------------------------------
            | Amount Validation
            |--------------------------------------------------------------------------
            */
            amountInput.addEventListener('input', function () {

                amountErrorElement.innerText = '';

                const enteredAmount = Number(this.value || 0);

                if (!staffSelect.value) {
                    amountErrorElement.innerText =
                        'Please select a staff first.';

                    return;
                }

                if (enteredAmount <= 0) {
                    return;
                }

                if (enteredAmount > availableSalary) {
                    amountErrorElement.innerText =
                        'Advance amount cannot exceed available salary ₹' +
                        formatMoney(availableSalary);
                }
            });

            /*
            |--------------------------------------------------------------------------
            | Form Submit Validation
            |--------------------------------------------------------------------------
            */
            form.addEventListener('submit', function (event) {

                amountErrorElement.innerText = '';

                const staffId = staffSelect.value;
                const enteredAmount = Number(amountInput.value || 0);

                if (!staffId) {
                    event.preventDefault();
                    toastr.error('Please select a staff.');
                    return;
                }

                if (enteredAmount < 1) {
                    event.preventDefault();

                    amountErrorElement.innerText =
                        'Advance amount must be at least ₹1.00';

                    amountInput.focus();
                    return;
                }

                if (enteredAmount > availableSalary) {
                    event.preventDefault();

                    amountErrorElement.innerText =
                        'Advance amount cannot exceed available salary ₹' +
                        formatMoney(availableSalary);

                    amountInput.focus();
                    return;
                }

                submitButton.disabled = true;
                submitButton.innerText = 'Submitting...';
            });

            /*
            |--------------------------------------------------------------------------
            | Discard
            |--------------------------------------------------------------------------
            */
            discardButton.addEventListener('click', function () {
                form.reset();
                staffChoice.removeActiveItems();
                staffChoice.setChoiceByValue('');
                resetSalaryDisplay();
                flatpickr("#paid_date").setDate(new Date());
            });

            /*
            |--------------------------------------------------------------------------
            | Fetch old selected staff after validation error
            |--------------------------------------------------------------------------
            */
            const oldStaffId = staffSelect.value;

            if (oldStaffId) {
                fetchStaffSalary(oldStaffId);
            }

        });
    </script>

@endsection