@extends('includes/layout')
@section('main-page-content')
    <style>
        .page-container {
            background: #f5f6fa;
            min-height: 100vh;
            padding: 1rem 0;
        }

        .page-header {
            background: white;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 1.5rem;
        }

        .employee-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .employee-avatar {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            border: 2px solid #e3f2fd;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .employee-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .employee-info h2 {
            margin: 0 0 0.5rem 0;
            color: #1a1a1a;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .employee-position {
            color: #666;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
        }

        .leave-summary {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .date-display {
            text-align: center;
        }

        .date-number {
            font-size: 1.5rem;
            font-weight: 800;
            color: #019FF3;
            line-height: 1;
        }

        .date-month {
            font-size: 0.8rem;
            color: #666;
            text-transform: uppercase;
            margin-top: 0.25rem;
        }

        .date-separator {
            font-size: 1.25rem;
            color: #999;
            font-weight: 300;
        }

        .leave-duration {
            background: #019FF3;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .status-section {
            text-align: right;
        }

        .status-badge {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .status-approved {
            background: #d4edda;
            color: #155724;
            border: 2px solid #c3e6cb;
        }

        .status-rejected {
            background: #f8d7da;
            color: #721c24;
            border: 2px solid #f5c6cb;
        }

        .status-expired {
            background: #fff3cd;
            color: #856404;
            border: 2px solid #ffeaa7;
        }

        .status-unpaid {
            background: #d1ecf1;
            color: #0c5460;
            border: 2px solid #bee5eb;
        }

        .status-custom {
            background: #e2e3e5;
            color: #383d41;
            border: 2px solid #d6d8db;
        }

        .status-pending {
            background: #e2e3e5;
            color: #383d41;
            border: 2px solid #d6d8db;
        }

        .content-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 1.5rem;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .info-card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .card-header {
            background: linear-gradient(135deg, #019FF3 0%, #0056b3 100%);
            color: white;
            padding: 1rem;
        }

        .card-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
        }

        .card-content {
            padding: 1.5rem;
        }

        .leave-details {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 1.5rem;
            border-left: 4px solid #019FF3;
        }

        .leave-type {
            color: #019FF3;
            font-weight: 700;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }

        .leave-reason {
            color: #333;
            line-height: 1.7;
            font-size: 1rem;
        }

        .breakdown-section {
            margin-top: 1.5rem;
        }

        .breakdown-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-top: 1rem;
        }

        .breakdown-card {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            border: 1px solid #e9ecef;
        }

        .breakdown-title {
            font-weight: 700;
            color: #333;
            margin-bottom: 0.75rem;
            font-size: 0.9rem;
        }

        .date-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .date-item {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 0.4rem 0.6rem;
            font-size: 0.8rem;
            color: #555;
        }

        .date-item.paid {
            background: #d4edda;
            color: #155724;
            border-color: #c3e6cb;
        }

        .date-item.unpaid {
            background: #f8d7da;
            color: #721c24;
            border-color: #f5c6cb;
        }

        .balance-section {
            margin-top: 2rem;
        }

        .balance-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }

        .balance-item {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 1.25rem;
            text-align: center;
        }

        .balance-count {
            font-size: 1.5rem;
            font-weight: 700;
            color: #019FF3;
            margin-bottom: 0.5rem;
        }

        .balance-label {
            color: #666;
            font-size: 0.9rem;
        }

        .action-panel {
            background: #f8f9fa;
            border-top: 1px solid #e9ecef;
            padding: 2rem;
        }

        .action-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem;
        }

        .action-btn {
            padding: 1rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.95rem;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .btn-approve {
            background: #28a745;
            color: white;
        }

        .btn-approve:hover {
            background: #218838;
            transform: translateY(-2px);
        }

        .btn-unpaid {
            background: #ffc107;
            color: #212529;
        }

        .btn-unpaid:hover {
            background: #e0a800;
            transform: translateY(-2px);
        }

        .btn-custom {
            background: #17a2b8;
            color: white;
        }

        .btn-custom:hover {
            background: #138496;
            transform: translateY(-2px);
        }

        .btn-reject {
            background: white;
            color: #dc3545;
            border: 2px solid #dc3545;
        }

        .btn-reject:hover {
            background: #dc3545;
            color: white;
            transform: translateY(-2px);
        }

        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .sidebar-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            overflow: hidden;
        }

        .sidebar-header {
            background: linear-gradient(135deg, #019FF3 0%, #0056b3 100%);
            color: white;
            padding: 1.5rem;
            text-align: center;
        }

        .sidebar-header h3 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
        }

        .sidebar-content {
            padding: 1.5rem;
        }

        .employee-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .employee-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .employee-avatar-small {
            width: 45px;
            height: 45px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }

        .employee-avatar-small img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .employee-details h4 {
            margin: 0 0 0.25rem 0;
            font-size: 0.95rem;
            font-weight: 600;
            color: #333;
        }

        .employee-details p {
            margin: 0;
            color: #666;
            font-size: 0.85rem;
        }

        .leave-dates {
            margin-top: 0.5rem;
        }

        .leave-date-range {
            display: block;
            color: #019FF3;
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
            padding: 0.2rem 0.5rem;
            background: #e3f2fd;
            border-radius: 4px;
            border-left: 3px solid #019FF3;
        }

        .empty-state {
            text-align: center;
            padding: 3rem 1.5rem;
            color: #999;
        }

        .empty-state i {
            font-size: 3rem;
            margin-bottom: 1rem;
            opacity: 0.5;
        }

        .modal-content {
            border-radius: 8px;
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .modal-header {
            background: linear-gradient(135deg, #019FF3 0%, #0056b3 100%);
            color: white;
            border-radius: 8px 8px 0 0;
            border: none;
            padding: 1rem 1.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .modal-title {
            font-weight: 600;
            color: white;
            margin: 0;
        }

        .btn-close-custom {
            background: none;
            border: none;
            font-size: 1.5rem;
            color: white;
            padding: 0;
            margin: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .btn-close-custom:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .btn-close-custom:focus {
            box-shadow: none;
            color: white;
            outline: none;
        }

        .modal-body {
            padding: 1.5rem;
        }

        .form-control {
            border-radius: 4px;
            border: 1px solid #dee2e6;
            padding: 0.75rem;
            font-size: 0.9rem;
        }

        .form-control:focus {
            border-color: #019FF3;
            box-shadow: 0 0 0 0.1rem rgba(1, 159, 243, 0.15);
        }

        .form-label {
            font-weight: 500;
            color: #333;
            margin-bottom: 0.5rem;
        }

        .form-text {
            font-size: 0.8rem;
            color: #666;
            margin-top: 0.25rem;
        }

        @media (max-width: 992px) {
            .content-grid {
                grid-template-columns: 1fr;
            }

            .header-content {
                flex-direction: column;
                align-items: stretch;
            }

            .leave-summary {
                justify-content: center;
            }

            .status-section {
                text-align: center;
            }
        }

        @media (max-width: 768px) {
            .page-container {
                padding: 1rem 0;
            }

            .employee-section {
                flex-direction: column;
                text-align: center;
            }

            .leave-summary {
                flex-direction: column;
                gap: 1rem;
            }

            .breakdown-grid {
                grid-template-columns: 1fr;
            }

            .action-grid {
                grid-template-columns: 1fr;
            }
        }

        .full_loader {
            background: url('/loader.gif');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center;
            background-size: 50px;
            z-index: 1000;
            position: absolute;
            min-width: 100vw;
            min-height: 100vh;
            overflow: hidden;
            max-width: 100vw;
            max-height: 100vh;
            background-color: white;
        }
    </style>

    <div class="full_loader"></div>

    <div class="page-container">
        <div class="container-xxl">
            <!-- Page Header -->
            <div class="page-header">
                <div class="header-content">
                    <div class="employee-section">
                        <div class="employee-avatar">
                            <img src="{{ asset($emp_details->EmpPersonalDetails->image) }}" alt="Employee Avatar">
                        </div>
                        <div class="employee-info">
                            <h2>{{ $emp_details->EmpPersonalDetails->first_name }}
                                {{ $emp_details->EmpPersonalDetails->middle_name ? $emp_details->EmpPersonalDetails->middle_name : '' }}
                                {{ $emp_details->EmpPersonalDetails->last_name }}</h2>
                            <div class="employee-position">{{ $emp_role->title }}</div>

                            <div class="leave-summary">
                                <div class="date-display">
                                    <div class="date-number">{{ \Carbon\Carbon::parse($leave_request->from)->format('d') }}
                                    </div>
                                    <div class="date-month">{{ \Carbon\Carbon::parse($leave_request->from)->format('M') }}
                                    </div>
                                </div>
                                <div class="date-separator">→</div>
                                <div class="date-display">
                                    <div class="date-number">{{ \Carbon\Carbon::parse($leave_request->to)->format('d') }}
                                    </div>
                                    <div class="date-month">{{ \Carbon\Carbon::parse($leave_request->to)->format('M') }}
                                    </div>
                                </div>
                                @php
                                    $leave_request_from = $leave_request->from;
                                    $leave_request_to = $leave_request->to;
                                    $start_date = new DateTime($leave_request_from);
                                    $end_date = new DateTime($leave_request_to);

                                    // Calculate working days excluding weekends
                                    $total_days = 0;
                                    $current_date = clone $start_date;
                                    while ($current_date <= $end_date) {
                                        // Skip Saturday (6) and Sunday (0)
                                        if ($current_date->format('w') != '0' && $current_date->format('w') != '6') {
                                            $total_days++;
                                        }
                                        $current_date->modify('+1 day');
                                    }
                                @endphp
                                <div class="leave-duration">{{ $total_days }} {{ $total_days == 1 ? 'Day' : 'Days' }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="status-section">
                        @if (in_array('Leave Request Maintain', Session::get('permissions')))
                            @if ($leave_request->status == 1)
                                @if (!empty($leave_request->paid_dates) && $leave_request->paid_days > 0 && $leave_request->paid_days < $total_days)
                                    <span class="status-badge status-custom">Custom Approve</span>
                                @else
                                    <span class="status-badge status-approved">Approved</span>
                                @endif
                            @elseif($leave_request->status == 2)
                                <span class="status-badge status-rejected">Rejected</span>
                            @elseif($leave_request->status == 3)
                                <span class="status-badge status-expired">Expired</span>
                            @elseif($leave_request->status == 4)
                                <span class="status-badge status-unpaid">Approved as Unpaid</span>
                            @else
                                <span class="status-badge status-pending">Pending</span>
                            @endif
                        @endif
                    </div>
                </div>
            </div>

            <!-- Content Grid -->
            <div class="content-grid">
                <!-- Main Content -->
                <div class="main-content">
                    <!-- Leave Details Card -->
                    <div class="info-card">
                        <div class="card-header">
                            <h3>Leave Details</h3>
                        </div>

                        <div class="card-content">
                            <div class="leave-details">
                                <div class="leave-type">{{ $leave_pgk->title }}</div>
                                <div class="leave-reason">{{ $leave_request->reason }}</div>
                            </div>

                            @php
                                // Build list of working dates in the leave range (excluding weekends)
                                $fromDateObj = new DateTime($leave_request->from);
                                $toDateObj = new DateTime($leave_request->to);
                                $all_dates = [];
                                $current_date = clone $fromDateObj;
                                while ($current_date <= $toDateObj) {
                                    // Only include weekdays (Monday to Friday)
                                    if ($current_date->format('w') != '0' && $current_date->format('w') != '6') {
                                        $all_dates[] = $current_date->format('Y-m-d');
                                    }
                                    $current_date->modify('+1 day');
                                }

                                // Decode paid dates if custom approved
                                $paid_dates = [];
                                if (!empty($leave_request->paid_dates)) {
                                    $decoded = json_decode($leave_request->paid_dates, true);
                                    if (is_array($decoded)) {
                                        $paid_dates = array_values(array_intersect($all_dates, $decoded));
                                    }
                                }

                                // Determine paid/unpaid sets based on status
                                if ($leave_request->status == 1) {
                                    if (empty($paid_dates)) {
                                        $paid_dates = $all_dates;
                                    }
                                    $unpaid_dates = array_values(array_diff($all_dates, $paid_dates));
                                } elseif ($leave_request->status == 4) {
                                    $paid_dates = [];
                                    $unpaid_dates = $all_dates;
                                } else {
                                    $paid_dates = [];
                                    $unpaid_dates = [];
                                }

                                $paid_count = count($paid_dates);
                                $unpaid_count = count($unpaid_dates);
                            @endphp

                            @if (
                                ($leave_request->status == 1 || $leave_request->status == 4) &&
                                    (count($all_dates) > 2 ||
                                        (!empty($leave_request->paid_dates) &&
                                            $leave_request->paid_days > 0 &&
                                            $leave_request->paid_days < $total_days)))
                                <div class="breakdown-section">
                                    <div class="breakdown-grid">
                                        <div class="breakdown-card">
                                            <div class="breakdown-title">Approved Leave ({{ $paid_count }})</div>
                                            @if ($paid_count > 0)
                                                <div class="date-list">
                                                    @foreach ($paid_dates as $d)
                                                        <span
                                                            class="date-item paid">{{ \Carbon\Carbon::parse($d)->format('d M Y') }}</span>
                                                    @endforeach
                                                </div>
                                            @else
                                                <small class="text-muted">No paid dates</small>
                                            @endif
                                        </div>

                                        <div class="breakdown-card">
                                            <div class="breakdown-title">Not Approved Leave ({{ $unpaid_count }})</div>
                                            @if ($unpaid_count > 0)
                                                <div class="date-list">
                                                    @foreach ($unpaid_dates as $d)
                                                        <span
                                                            class="date-item unpaid">{{ \Carbon\Carbon::parse($d)->format('d M Y') }}</span>
                                                    @endforeach
                                                </div>
                                            @else
                                                <small class="text-muted">No unpaid dates</small>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endif

                            <div class="balance-section">
                                <div class="balance-grid">
                                    @foreach ($all_pkgs as $all_pkg)
                                        @php
                                            $color_code = $all_pkg->color_code;
                                            $linear_gradient_start = 'rgba(0, 0, 0, 0.15)';
                                            $linear_gradient_end = 'rgba(0, 0, 0, 0.15)';
                                            $text_color = '#fff';

                                            // Calculate current leave year anniversary
                                            $empStartDateStr = $emp_details->employment_start_date ?? null;
                                            if ($empStartDateStr) {
                                                $empStart = \Carbon\Carbon::parse($empStartDateStr);
                                                $now = \Carbon\Carbon::now();
                                                $yearsDiff = $now->year - $empStart->year;
                                                $anniversaryStart = $empStart->copy()->addYears($yearsDiff);
                                                if ($anniversaryStart->gt($now)) {
                                                    $anniversaryStart = $empStart->copy()->addYears($yearsDiff - 1);
                                                }
                                                $anniversaryEnd = $anniversaryStart->copy()->addYear()->subDay();
                                            } else {
                                                $anniversaryStart = \Carbon\Carbon::now()->startOfYear();
                                                $anniversaryEnd = \Carbon\Carbon::now()->endOfYear();
                                            }

                                            $leave_requests_for_pkg = DB::table('leave_requests')
                                                ->where('leave_package_id', $all_pkg->id)
                                                ->where('employee_id', $emp_details->id)
                                                ->where('status', 1)
                                                ->where(function ($query) use ($anniversaryStart, $anniversaryEnd) {
                                                    $query
                                                        ->whereBetween('from', [$anniversaryStart, $anniversaryEnd])
                                                        ->orWhereBetween('to', [$anniversaryStart, $anniversaryEnd]);
                                                })
                                                ->get();

                                            $count = 0;
                                            foreach ($leave_requests_for_pkg as $leave) {
                                                if (!empty($leave->paid_dates) && $leave->paid_days > 0) {
                                                    $count += $leave->paid_days;
                                                } else {
                                                    // Recalculate working days excluding weekends
                                                    $start_date = new DateTime($leave->from);
                                                    $end_date = new DateTime($leave->to);
                                                    $working_days = 0;
                                                    $current_date = clone $start_date;
                                                    while ($current_date <= $end_date) {
                                                        // Skip Saturday (6) and Sunday (0)
                                                        if (
                                                            $current_date->format('w') != '0' &&
                                                            $current_date->format('w') != '6'
                                                        ) {
                                                            $working_days++;
                                                        }
                                                        $current_date->modify('+1 day');
                                                    }
                                                    $count += $working_days;
                                                }
                                            }
                                        @endphp

                                        @if ($color_code)
                                            @php
                                                [$r, $g, $b] = sscanf($color_code, '#%02x%02x%02x');
                                                $linear_gradient_start = "rgba($r, $g, $b, 0.15)";
                                                $linear_gradient_end = "rgba($r, $g, $b, 0.15)";
                                                $text_color = "$color_code";
                                            @endphp
                                        @endif
                                        <div class="balance-item"
                                            style="{{ 'background: linear-gradient(0deg, ' . $linear_gradient_start . ', ' . $linear_gradient_end . '); color: ' . $text_color . ';' }}">
                                            <div class="balance-count">{{ $count }} / {{ $all_pkg->leave_number }}
                                            </div>
                                            <div class="balance-label">{{ $all_pkg->title }}</div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @if ($leave_request->status == 0)
                                <div class="action-panel">
                                    <div class="action-grid">
                                        <button class="action-btn btn-approve" value="1"
                                            onclick="update_leave_status({{ $leave_request->id }}, 1);">
                                            Approve as Paid
                                        </button>
                                        <button class="action-btn btn-unpaid" value="4"
                                            onclick="update_leave_status({{ $leave_request->id }}, 4);">
                                            Approve as Unpaid
                                        </button>
                                        @if ($total_days > 1)
                                            <button class="action-btn btn-custom" type="button"
                                                onclick="openCustomApproveModal({{ $leave_request->id }}, {{ $total_days }});">
                                                Custom Approve
                                            </button>
                                        @endif
                                        <button class="action-btn btn-reject" value="2" type="button"
                                            onclick="openRejectModal({{ $leave_request->id }})">
                                            Reject
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="sidebar">
                    <div class="sidebar-card">
                        <div class="sidebar-header">
                            <h3>Who's on Leave</h3>
                        </div>

                        <div class="sidebar-content">
                            @if (!$today_on_leave_employes->isEmpty())
                                <div class="employee-list">
                                    @php
                                        // Group employees by ID to handle multiple leave entries
                                        $grouped_employees = $today_on_leave_employes->groupBy('emp_id');
                                    @endphp
                                    @foreach ($grouped_employees as $employee_id => $leave_entries)
                                        @php
                                            $employee = $leave_entries->first();
                                        @endphp
                                        <div class="employee-item">
                                            <div class="employee-avatar-small">
                                                <img src="{{ asset($employee->image) }}" alt="Employee Avatar">
                                            </div>
                                            <div class="employee-details">
                                                <h4>{{ $employee->first_name }}
                                                    {{ $employee->middle_name ? $employee->middle_name : '' }}
                                                    {{ $employee->last_name }}</h4>
                                                <p>{{ $employee->title }}</p>
                                                <div class="leave-dates">
                                                    @foreach ($leave_entries as $leave_entry)
                                                        <small class="leave-date-range">
                                                            {{ \Carbon\Carbon::parse($leave_entry->from)->format('d M') }}
                                                            -
                                                            {{ \Carbon\Carbon::parse($leave_entry->to)->format('d M Y') }}
                                                        </small>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="empty-state">
                                    <i class="mdi mdi-calendar-check"></i>
                                    <div>No one is on leave today</div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Custom Approve Modal -->
    <div class="modal fade" id="customApproveModal" tabindex="-1" aria-labelledby="customApproveLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="customApproveLabel">Custom Approve Leave</h5>
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="custom_approve_leave_id" value="">
                    <div class="mb-3">
                        <label for="paid_days" class="form-label">Number of paid leave days</label>
                        <input type="number" min="1" class="form-control" id="paid_days" placeholder="e.g. 1">
                        <div class="form-text" id="paid_days_help">Minimum: 1 day, Maximum: <span id="paid_days_max"
                                class="fw-bold"></span> days</div>
                    </div>
                    <div class="mb-3">
                        <label for="custom_reason" class="form-label">Reason (optional)</label>
                        <textarea id="custom_reason" class="form-control" rows="3" placeholder="Reason for custom approval"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" onclick="submitCustomApprove()">Submit</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Reject Modal -->
    <div class="modal fade" id="rejectModal" tabindex="-1" aria-labelledby="rejectLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rejectLabel">Reject Leave</h5>
                    <button type="button" class="btn-close-custom" data-bs-dismiss="modal"
                        aria-label="Close">×</button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="reject_leave_id" value="">
                    <div class="mb-3">
                        <label for="reject_reason" class="form-label">Reason for Rejection</label>
                        <textarea id="reject_reason" class="form-control" rows="3"
                            placeholder="Please provide a reason for rejection"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" onclick="submitReject()">Reject</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css-js')
    <script>
        function loader(show) {
            if (show) {
                $('.full_loader').removeClass('d-none');
            } else {
                $('.full_loader').addClass('d-none');
            }
        }

        $(document).ready(function() {
            $('.full_loader').addClass('d-none');

            // Allow clearing the field but prevent 0
            $('#paid_days').on('input', function() {
                var value = $(this).val();
                if (value === '') {
                    return; // Allow empty field
                }
                var numValue = parseInt(value);
                if (numValue === 0) {
                    $(this).val('1');
                }
            });

            // Prevent pasting 0
            $('#paid_days').on('paste', function(e) {
                setTimeout(() => {
                    var value = $(this).val();
                    if (value === '') {
                        return; // Allow empty field
                    }
                    var numValue = parseInt(value);
                    if (numValue === 0) {
                        $(this).val('1');
                    }
                }, 10);
            });
        });

        function update_leave_status(id, status) {
            loader(true);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "PUT",
                url: "/api/leave-request/" + id + "/update-status",
                data: {
                    status: status
                },
                success: function(response) {
                    loader(false);
                    toastr.success(response.message);
                    const params = new URLSearchParams(window.location.search);
                    const fromParam = params.get('from') || 0;
                    window.location.href = "{{ url('/leave-request') }}?from=" + fromParam;
                },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });
        }

        function openCustomApproveModal(id, maxDays) {
            $('#custom_approve_leave_id').val(id);
            $('#paid_days').val('1');
            $('#paid_days').attr('max', maxDays);
            $('#paid_days').attr('min', 1);
            $('#paid_days_max').text(maxDays);
            var modalEl = document.getElementById('customApproveModal');
            var modal = new bootstrap.Modal(modalEl);
            modal.show();
        }

        function submitCustomApprove() {
            var id = $('#custom_approve_leave_id').val();
            var paidDaysInput = $('#paid_days').val();
            var paidDays = parseInt(paidDaysInput || 1, 10); // Default to 1 if empty
            var max = parseInt($('#paid_days').attr('max'), 10);
            var reason = $('#custom_reason').val();

            // If field is empty, set it to 1
            if (paidDaysInput === '') {
                $('#paid_days').val('1');
                paidDays = 1;
            }

            if (isNaN(paidDays) || paidDays < 1 || paidDays > max) {
                toastr.error('Paid days must be between 1 and ' + max + '.');
                return;
            }
            loader(true);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "PUT",
                url: "/api/leave-request/" + id + "/custom-approve",
                data: {
                    paid_days: paidDays,
                    reason: reason
                },
                success: function(response) {
                    loader(false);
                    toastr.success(response.message);
                    const params = new URLSearchParams(window.location.search);
                    const fromParam = params.get('from') || 0;
                    window.location.href = "{{ url('/leave-request') }}?from=" + fromParam;
                },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });
        }

        function openRejectModal(id) {
            $('#reject_leave_id').val(id);
            $('#reject_reason').val('');
            var modalEl = document.getElementById('rejectModal');
            var modal = new bootstrap.Modal(modalEl);
            modal.show();
        }

        function submitReject() {
            var id = $('#reject_leave_id').val();
            var reason = $('#reject_reason').val();
            loader(true);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "PUT",
                url: "/api/leave-request/" + id + "/update-status",
                data: {
                    status: 2,
                    reason: reason
                },
                success: function(response) {
                    loader(false);
                    toastr.success(response.message);
                    const params = new URLSearchParams(window.location.search);
                    const fromParam = params.get('from') || 0;
                    window.location.href = "{{ url('/leave-request') }}?from=" + fromParam;
                },
                error: function(response) {
                    loader(false);
                    if (response.status == 500) {
                        toastr.error("Something went wrong");
                    } else {
                        toastr.error(response.responseJSON.message);
                    }
                }
            });
        }
    </script>
@endsection