@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';

                                        $leave_requests_for_pkg = DB::table('leave_requests')
                                            ->where('leave_package_id', $all_pkg->id)
                                            ->where('employee_id', $emp_details->id)
                                            ->where('status', 1)
                                            ->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
                                            list($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