@extends('layouts.userLayout')

@section('content')
    {{-- <div class="breadcrumb_bg_img">
    <div class="page_heading">My Leaves</div>
</div> --}}
    @php
        $totalLeaves = isset($listing) ? $listing->total() : 0;
    @endphp

    <section class="dashboard_section">

        <div class="container">

            <div class="row">

                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">

                    <div class="dashboard_sec_area">

                        <div class="dashboard_inner_area">

                            <div class="left_sidebar d-lg-block d-none">
                                @include('user.dashboard.sidebar')
                            </div>

                            <div class="right_sec_area">

                                @include('user.partials.flash_messages')

                                <div class="classes_listing_area mt-3">

                                    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

                                        <div>

                                            <h2 class="h4 mb-1 fw-bold">
                                                My Student's Leave History ({{ $totalLeaves }})
                                            </h2>

                                            <p class="text-muted mb-0">
                                                View all your applied leaves and approval status
                                            </p>

                                        </div>

                                        <div class="mt-2 mt-sm-0 d-flex align-items-center gap-2">

                                            {{--  <span class="badge bg-primary rounded-pill fs-6 px-3 py-2">

									        @php
									            $totalLeaves = isset($listing) ? $listing->total() : 0;
									        @endphp

									        Total {{ $totalLeaves }}
									        {{ $totalLeaves == 1 ? 'Leave' : 'Leaves' }}

									    </span> --}}

                                            <a
                                                href="{{ route('user.leave.add') }}"
                                                type="button"
                                                class="badge border-0 rounded-pill fs-6 px-3 py-2 text-white"
                                                style="background-color: #004EA1"
                                            >
                                                <i class="fa fa-plus me-1"></i>
                                                Apply Leave
                                            </a>

                                        </div>

                                    </div>

                                </div>

                                <div class="row mt-5">

                                    <div class="col-12 mt-3">

                                        @if (isset($listing) && count($listing) > 0)
                                            <div class="table-responsive">

                                                <table class="table table-hover align-middle">

                                                    <thead class="table-light">

                                                        <tr>

                                                            <th>#</th>
                                                            <th>From Date</th>
                                                            <th>To Date</th>
                                                            <th>Days</th>
                                                            <th>Subject</th>
                                                            <th>Status</th>
                                                            <th>Action</th>

                                                        </tr>

                                                    </thead>

                                                    <tbody>

                                                        @include('user.leaves.listingLoop')

                                                    </tbody>

                                                </table>

                                            </div>

                                            <div class="pagination">
                                                @include('frontend.partials.pagination', [
                                                    'pagination' => $listing,
                                                    'url' => route('user.leave.index'),
                                                ])
                                            </div>
                                        @else
                                            <div class="no_data_found_sec" style="text-align: center;">

                                                <div class="no_data_img" style="margin: 0 auto">
                                                    <img src="{{ url('assets/images/no_data_found.png') }}"
                                                        alt="..." />
                                                </div>

                                                <h4 class="text-center mt-3">
                                                    No Leave Records Found
                                                </h4>

                                            </div>
                                        @endif

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>
    {{-- add modal --}}
    <div
        class="modal fade"
        id="applyLeaveModal"
        tabindex="-1"
        aria-hidden="true"
    >

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Apply Leave
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                    ></button>

                </div>

                <form
                    action="{{ route('user.leave.add') }}"
                    method="POST"
                    enctype="multipart/form-data"
                >

                    @csrf

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                From Date
                            </label>

                            <input
                                type="date"
                                name="leave_from_date"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                To Date
                            </label>

                            <input
                                type="date"
                                name="leave_to_date"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Subject
                            </label>

                            <input
                                type="text"
                                name="subject"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Reason
                            </label>

                            <textarea
                                name="reason"
                                class="form-control"
                                rows="4"
                                required
                            ></textarea>

                        </div>
                        <div class="form-group task_fields upload mt-3">

                            <label class="set_label d-block mb-2">
                                Upload Task :
                                <small style="color:#DC3545;">*</small>
                            </label>

                            <label class="upload_task w-100 text-center">

                                <div class="upload_img border rounded p-3 bg-light position-relative" id="assgn_upload">

                                    <img
                                        id="upload_assign_asignment"
                                        data-path="assign_assignments"
                                        file-type="image_files_upload"
                                        data-resize-large="858*383"
                                        data-resize-medium="700*400"
                                        data-resize-small="314*150"
                                        class="profile-user-img img-fluid"
                                        data-url="{{ route('actions.uploadFile') }}"
                                        src="{{ url('frontend/images/file-upload-blue-icon.png') }}"
                                        alt="Upload File"
                                        style="max-width:70px;"
                                    />

                                    <p class="mt-2 mb-0 text-muted small">
                                        Click to upload file
                                    </p>

                                    <i
                                        class="fa fa-times d-none fileRemover position-absolute"
                                        data-path=""
                                        style="top:10px; right:10px;"
                                    ></i>

                                </div>

                                <textarea
                                    style="opacity:0;height:0;width:0;position:absolute;"
                                    required
                                    class="required_upload_field"
                                    name="file"
                                ></textarea>

                            </label>

                            <label
                                id="file-error"
                                class="error d-block mt-1"
                                for="file"
                            >
                                @error('file')
                                    {{ $message }}
                                @enderror
                            </label>

                            <small class="d-block mt-2 text-muted">
                                Allowed file types: .jpeg, .jpg, .png, .pdf, .doc, .docx only
                            </small>

                        </div>
                        <span><b>Allowed file types:- .jpeg, .jpg, .png, .pdf, .doc or .docx only</b></span>
                    </div>

                    <div class="modal-footer">

                        <button
                            type="button"
                            class="btn btn-light"
                            data-bs-dismiss="modal"
                        >
                            Cancel
                        </button>

                        <button type="submit" class="btn btn-primary">
                            Submit Leave
                        </button>

                    </div>

                </form>

            </div>

        </div>
    </div>

    {{-- edit modal --}}
    <div
        class="modal fade"
        id="editLeaveModal"
        tabindex="-1"
    >

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Edit Leave
                    </h5>

                    <button
                        type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                    ></button>

                </div>

                <form action="{{ route('user.leave.update') }}" method="POST">

                    @csrf

                    <input
                        type="hidden"
                        name="id"
                        id="edit_leave_id"
                    >

                    <div class="modal-body">

                        <div class="mb-3">

                            <label class="form-label">
                                From Date
                            </label>

                            <input
                                type="date"
                                name="leave_from_date"
                                id="edit_leave_from"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                To Date
                            </label>

                            <input
                                type="date"
                                name="leave_to_date"
                                id="edit_leave_to"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Subject
                            </label>

                            <input
                                type="text"
                                name="subject"
                                id="edit_leave_subject"
                                class="form-control"
                                required
                            >

                        </div>

                        <div class="mb-3">

                            <label class="form-label">
                                Reason
                            </label>

                            <textarea
                                name="reason"
                                id="edit_leave_reason"
                                class="form-control"
                                rows="4"
                                required
                            ></textarea>

                        </div>
                        <div class="form-group task_fields upload">
                            <label class="set_label">Upload Task : <small style="color:#DC3545;">*</small></label>
                            <label class="upload_task">
                                <div class="upload_img" id="assgn_upload">
                                    <img
                                        id="upload_assign_asignment"
                                        data-path="assign_assignments"
                                        file-type="image_files_upload"
                                        data-resize-large="858*383"
                                        data-resize-medium="700*400"
                                        data-resize-small="314*150"
                                        class="profile-user-img"
                                        data-url="{{ route('actions.uploadFile') }}"
                                        src="{{ url('frontend/images/file-upload-blue-icon.png') }}"
                                        alt="Profile Image"
                                    />
                                    {{-- <img src="{{ url('frontend/images/upload_icon.png') }}" alt="..." /> --}}
                                </div>
                                <i class="fa fa-times d-none fileRemover" data-path=""></i>
                                {{-- <input type="hidden" id="file_tosave" name="file" required> --}}
                                <textarea
                                    style="opacity: 0;"
                                    required
                                    class="required_upload_field "
                                    name="file"
                                ></textarea>
                            </label>
                            <label
                                id="file-error"
                                class="error"
                                for="file"
                            >
                                @error('file')
                                    {{ $message }}
                                @enderror
                            </label>
                        </div>
                        <span><b>Allowed file types:- .jpeg, .jpg, .png, .pdf, .doc or .docx only</b></span>

                    </div>

                    <div class="modal-footer">

                        <button type="submit" class="btn btn-primary">
                            Update Leave
                        </button>

                    </div>

                </form>

            </div>

        </div>
    </div>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {

            $('[data-bs-toggle="tooltip"]').tooltip();

        });
    </script>
@endsection