@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')

@section('content')
    <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('attendance') }}">
                        <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>
                </button>
                Add Attendance
            </h5>
        </div>
    </div>

    <div id="alertBox" style="display:none;"></div>

    <div class="card border-0 shadow-sm">
        <div class="card-header py-3">
            <h5 class="mb-0"><i class="ti tabler-calendar-check me-2"></i>Attendance Information</h5>
        </div>
        <div class="card-body p-4">
            <form id="attendanceForm">
                @csrf
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Attendance Date *</label>
                        <input type="date" name="attendance_date" class="form-control" value="{{ date('Y-m-d') }}">
                        <div class="text-danger small" id="error_attendance_date"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Employee Type</label>
                        <select name="employee_type" class="form-select">
                            <option value="">Select Type</option>
                            @foreach(['Doctor','Receptionist','Nurse','Lab Technician','Pharmacist','Accountant'] as $type)
                                <option>{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Employee</label>
                        <select name="employee_id" class="form-select">
                            <option value="">Select Employee</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}">{{ $emp->name }} — {{ $emp->designation }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Status *</label>
                        <select name="status" class="form-select">
                            <option value="">Select Status</option>
                            @foreach(['Present','Absent','Half Day','Leave'] as $s)
                                <option>{{ $s }}</option>
                            @endforeach
                        </select>
                        <div class="text-danger small" id="error_status"></div>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Check In Time</label>
                        <input type="time" name="check_in" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Check Out Time</label>
                        <input type="time" name="check_out" class="form-control">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Leave Type</label>
                        <select name="leave_type" class="form-select">
                            <option value="">Select Leave Type</option>
                            @foreach(['Sick Leave','Casual Leave','Emergency Leave','Paid Leave','Unpaid Leave'] as $lt)
                                <option>{{ $lt }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Approval Status</label>
                        <select name="approval_status" class="form-select">
                            <option value="">Select</option>
                            <option>Approved</option>
                            <option>Pending</option>
                            <option>Rejected</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Remarks</label>
                        <textarea name="remarks" class="form-control" rows="3" placeholder="Any remarks"></textarea>
                    </div>
                </div>

                <hr class="my-4">
                <div class="d-flex justify-content-center gap-2">
                    <button type="reset" class="btn btn-label-secondary px-4">Reset</button>
                    <button type="submit" class="btn btn-primary px-4" id="submitBtn">
                        <span id="submitText">Save Attendance</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
const Toast = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000,
    timerProgressBar: true
});
</script>

    <script>
    $(document).ready(function() {
        $('#attendanceForm').on('submit', function(e) {
            e.preventDefault();
            $('.text-danger.small').text('');
            const btn  = $('#submitBtn');
            const text = $('#submitText');
            btn.prop('disabled', true);
            text.text('Saving...');

            $.ajax({
                url: '{{ route("store_attendance") }}',
                method: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    btn.prop('disabled', false);
                    text.text('Save Attendance');
                    if (response.success) {
                        $('#alertBox').html('<div class="alert alert-success">' + response.message + '</div>').show();
                         Toast.fire({
    icon: 'success',
    title: response.message
});
                        setTimeout(function() {
                            window.location.href = '{{ route("attendance") }}';
                        }, 1000);
                    }
                },
                error: function(xhr) {
                    btn.prop('disabled', false);
                    text.text('Save Attendance');
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            $('#error_' + field).text(messages[0]);
                            Toast.fire({icon: 'error',title: response.message});
                        });
                    }
                }
            });
        });
    });
    </script>

    <style>
        .card { border-radius: 18px; }
        .form-control, .form-select { min-height: 46px; border-radius: 10px; }
        .card-header { border-bottom: 1px solid #edf1f7; }
    </style>
@endsection