@extends('admin.layouts.layouts')

@section('title', 'My Leave')

@section('content')
    <style>
        #halfTypeWrapper .btn-group .btn {
            border-radius: 0;
        }
        #halfTypeWrapper .btn:first-child {
            border-radius: 0.375rem 0 0 0.375rem;
        }
        #halfTypeWrapper .btn:last-child {
            border-radius: 0 0.375rem 0.375rem 0;
        }

        #my-leave-table th
        {
            white-space: nowrap;
        }

        #my-leave-table td:nth-child(3) {
            white-space: normal;
            word-break: break-word;
            min-width: 235px;
        }

        #my-leave-table td:nth-child(4) {
            white-space: normal;
            word-break: break-word;
            min-width: 100px;
        }
    </style>

    {{-- Unified Modal for Create & Edit --}}
    <div class="modal fade" id="applyLeaveModal" tabindex="-1" role="dialog" aria-labelledby="applyLeaveModalLabel" aria-hidden="true"
        data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="applyLeaveModalLabel">Apply Leave</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form method="POST" id="applyLeaveForm" action="javascript:void(0)" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="id" id="land_type_id">
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="leave_type_id" class="form-label">
                                Leave Type <span class="text-danger">*</span>
                            </label>
                            <select name="leave_type_id" id="leave_type_id" class="form-control"
                                data-parsley-trigger='keyup' data-parsley-required="required"
                                data-parsley-required-message="Please select leave type" data-parsley-errors-container="#leave_type_id_error">
                                @foreach ($leaveTypeLists as $leaveType)
                                    <option value="{{ $leaveType->id }}">{{ $leaveType->name }}</option>
                                @endforeach
                            </select>
                            <div class="invalid-feedback" id="leave_type_id_error"></div>
                        </div>

                        <div class="form-group">
                            <div class="d-flex mt-1">
                                <div class="form-check mr-2">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="is_half" id="is_half"
                                            value="0" checked data-parsley-trigger='keyup' data-parsley-required="required"
                                            data-parsley-required-message="Please select day type" data-parsley-errors-container="#is_half_error">
                                        Full Day
                                        <i class="input-helper"></i>
                                    </label>
                                </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="radio" class="form-check-input" name="is_half" id="is_half"
                                            value="1">
                                        Half Day
                                        <i class="input-helper"></i>
                                    </label>
                                </div>
                            </div>
                            <div class="invalid-feedback d-block" id="is_half_error"></div>
                        </div>

                        <div class="form-group d-none" id="halfTypeWrapper">
                            <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                                <label class="btn btn-outline-primary flex-fill">
                                    <input type="radio" name="half_type" value="First Half"
                                        autocomplete="off"
                                        data-parsley-required="true"
                                        data-parsley-required-message="Please select half type"
                                        data-parsley-errors-container="#half_type_error">
                                    First Half
                                </label>
                                <label class="btn btn-outline-primary flex-fill">
                                    <input type="radio" name="half_type" value="Second Half"
                                        autocomplete="off"
                                        data-parsley-required="true"
                                        data-parsley-errors-container="#half_type_error">
                                    Second Half
                                </label>
                            </div>
                            <div class="invalid-feedback d-block" id="half_type_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="text" name="start_date" id="start_date" class="form-control startDate"
                                placeholder="Select Start Date" data-parsley-required data-parsley-datecustom
                                data-parsley-trigger='keyup' data-parsley-required-message="Please select start date"
                                data-parsley-errors-container='#start_date_error'>
                            <div class="invalid-feedback" id="start_date_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="end_date" class="form-label">End Date <span class="text-danger">*</span></label>
                            <input type="text" name="end_date" id="end_date" class="form-control endDate"
                                placeholder="Select End Date"
                                data-parsley-trigger='keyup' data-parsley-required data-parsley-required-message="Please select end date" data-parsley-datecustom
                                data-parsley-errors-container='#end_date_error'>
                            <div class="invalid-feedback" id="end_date_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="reason" class="form-label">Reason For Leave <span class="text-danger">*</span></label>
                            <textarea name="reason" id="reason" class="form-control"
                                placeholder="Enter Reason For Leave" data-parsley-required data-parsley-trigger="keyup"
                                data-parsley-required-message="Please enter reason for leave" data-parsley-maxlength="400"
                                maxlength="400" data-parsley-maxlength-message="Reason for leave cannot be more than 400 characters" data-parsley-errors-container="#reason_error"
                                rows="3"></textarea>
                            <div class="invalid-feedback" id="reason_error"></div>
                        </div>

                        <div class="form-group">
                            <label for="attachment" class="form-label">Upload File</label>
                            <div class="input-group">
                                <input type="file" name="attachment" id="attachment" class="form-control"
                                data-parsley-trigger="keyup" data-parsley-fileextension="jpg,jpeg,png,pdf"
                                data-parsley-errors-container='#attachment_error'>
                            </div>
                            <span class="text-danger" id="attachment_error">{{ $errors->first('attachment') }}</span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" id="modalSubmitBtn">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="page-header">
        <h3 class="page-title">My Leave Summary</h3>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Leave</li>
            </ol>
        </nav>
    </div>

    <div class="row">
        <!-- Summary Cards -->
        {{-- <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
            <div class="card card-statistics">
                <div class="card-body">
                    <div class="d-flex flex-md-column flex-xl-row flex-wrap justify-content-between align-items-md-center justify-content-xl-between">
                        <div class="float-left">
                            <i class="mdi mdi-calendar-month text-danger icon-lg"></i>
                        </div>
                        <div class="float-right">
                            <p class="mb-0 text-right">This Month</p>
                            <div class="fluid-container">
                                <h3 class="font-weight-medium text-right mb-0">{{ $thisMonthLeaves }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
            <div class="card card-statistics">
                <div class="card-body">
                    <div class="d-flex flex-md-column flex-xl-row flex-wrap justify-content-between align-items-md-center justify-content-xl-between">
                        <div class="float-left">
                            <i class="mdi mdi-calendar-range text-warning icon-lg"></i>
                        </div>
                        <div class="float-right">
                            <p class="mb-0 text-right">Last 30 Days</p>
                            <div class="fluid-container">
                                <h3 class="font-weight-medium text-right mb-0">{{ $last30DaysLeaves }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
            <div class="card card-statistics">
                <div class="card-body">
                    <div class="d-flex flex-md-column flex-xl-row flex-wrap justify-content-between align-items-md-center justify-content-xl-between">
                        <div class="float-left">
                            <i class="mdi mdi-checkbox-marked-circle-outline text-success icon-lg"></i>
                        </div>
                        <div class="float-right">
                            <p class="mb-0 text-right">Eligible Leaves</p>
                            <div class="fluid-container">
                                <h3 class="font-weight-medium text-right mb-0">{{ $eligibleLeave }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 grid-margin stretch-card">
            <div class="card card-statistics">
                <div class="card-body">
                    <div class="d-flex flex-md-column flex-xl-row flex-wrap justify-content-between align-items-md-center justify-content-xl-between">
                        <div class="float-left">
                            <i class="mdi mdi-account-arrow-left text-info icon-lg"></i>
                        </div>
                        <div class="float-right">
                            <p class="mb-0 text-right">Leaves Utilized</p>
                            <div class="fluid-container">
                                <h3 class="font-weight-medium text-right mb-0">{{ $totalLeavesUsed }}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </div>

    <!-- Leave Breakdown Section -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-bold">Leave Breakdown</h5>
                    <div class="d-flex align-items-center">
                        <button type="button" class="btn btn-primary btn-sm" id="applyButton">Apply Leave</button>
                    </div>
                </div>
                <div class="card-body">
                    @if (count($leaveSummary) > 0)
                        <div class="row">
                            @foreach ($leaveSummary as $leave)
                            <div class="col-md-3 col-sm-6 grid-margin stretch-card">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <h6 class="text-muted font-weight-normal">{{ $leave['name'] }} ({{ $leave['short_name'] }})</h6>
                                        <div class="d-flex justify-content-center">
                                            <h2 class="mb-0">{{ $leave['used'] }}/{{ $leave['total'] }}</h2>
                                        </div>
                                        @php
                                            $percentage = $leave['total'] > 0 ? ($leave['used'] / $leave['total']) * 100 : 0;
                                        @endphp
                                        <div class="progress progress-md mt-3">
                                            <div class="progress-bar bg-{{ $percentage > 80 ? 'danger' : ($percentage > 50 ? 'warning' : 'success') }}"
                                                role="progressbar"
                                                style="width: {{ $percentage }}%"
                                                aria-valuenow="{{ $percentage }}"
                                                aria-valuemin="0"
                                                aria-valuemax="100"></div>
                                        </div>
                                        <p class="mt-2 mb-0 text-muted">
                                            @if($leave['total'] - $leave['used'] > 0)
                                                <span class="text-success">{{ $leave['total'] - $leave['used'] }} remaining</span>
                                            @else
                                                <span class="text-danger">No leaves left</span>
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    @else
                        <p style="text-align: center; font-weight: bold;">No leave Found</p>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header bg-light d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold">My Leaves</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="table-responsive" style="overflow-x:auto;">
                    <table class="table table-nowrap" id="my-leave-table">
                        <thead>
                            <tr>
                                <th>Type</th>
                                <th>Dates</th>
                                <th>Reason</th>
                                <th>RM</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                                <th>File</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-js')
    <script type="text/javascript">
        var myLeaveListAjax = "{{ route('my-leave-list') }}";
        var myLeaveStore = "{{ route('my-leave.store') }}";
        var myLeaveCancel = "{{ route('my-leave.cancel') }}";
        var noImage = "{{ asset('assets/images/noimage/no-image.jpeg') }}";
    </script>
    <script src="{{ asset('assets/js/admin/my-leave.js') }}"></script>
@endsection