@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Leaves</title>
<style>
    .edit:hover {
        color: #fff !important;
        background-color: blue !important;
        border-color: #696cff !important;
        border-radius: 5px !important;
    }

    .delete:hover {
        color: #fff !important;
        background-color: #E3242B !important;
        border-color: #E3242B !important;
        border-radius: 5px !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }
</style>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>
<link rel="stylesheet" href="assets/css/toggle.css">
@section('main-content')
        <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl container-p-y row">
            <div class="col-6">
                <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Leaves</span></h4>
            </div>
            <div class="col-6">
                <div class="text-end upgrade-btn">
                    <a href="/apply-leave" class="btn btn-primary text-white">Apply Leave</a>
                </div>
            </div>

            <!-- Basic Bootstrap Table -->
            <div class="card pb-3 ms-2">
                <h5 class="mt-3">Your Leaves</h5>
                <div class="table dataTable text-nowrap dtbl_dropdown">
                    <table class="table" id="services">
                        <thead>
                            <tr>
                                <th class="">S.No</th>
                                <th class="ps-1">Leave Start Date</th>
                                <th class="ps-1">Leave End Date</th>
                                <th class="ps-1">Leave Applied Date</th>
                                <th class="ps-1">Leave Applied By</th>
                                <th class="ps-1">Description</th>
                                <th class="ps-1">Status</th>
                                <th class="ps-1 text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody class="table-border-bottom-0">
                            @if (isset($leaves) && count($leaves) > 0)
                                @foreach ($leaves as $key => $leave)
                                    <tr>
                                        <td class="">{{ $key + 1 }}</td>
                                        <td class="ps-1">{{ dateformatter($leave->start_date) }}</td>
                                        <td class="ps-1">{{ dateformatter($leave->end_date) }}</td>
                                        <td class="ps-1">{{ dateformatter($leave->created_at) }}</td>
                                        <td class="ps-1">{{ $leave->email }}</td>
                                        <td>
                                                                                        <button
                                                onclick="openingModal({{ $leave->id }},{{ json_encode($leave->description) }},
                                        '{{ dateformatter($leave->created_at) }}','{{ dateformatter($leave->start_date) }}','{{ dateformatter($leave->end_date) }}',{{ $leave->status }},
                                        '{{ $request_completed_on }}','{{ $attachment }}')"
                                                class="btn bg-transparent text-primary">View</button>
                                        </td>
                                        <td class="ps-1">
                                            @if ($leave->status == 0)
                                                Pending
                                            @elseif($leave->status == 1)
                                                Approved
                                            @elseif ($leave->status == 2)
                                                Rejected
                                            @endif
                                        </td>

                                        <td class="ps-1 text-center">
                                            @if ($leave->status == 0)
                                                <a href="/edit-leave/{{ $leave->id }}">
                                                    <button type="submit" class="btn btn-outline-primary">
                                                        Edit Leave
                                                    </button>
                                                </a>
                                            @elseif ($leave->status == 2)
                                                <a href="javascript::void(0)"
                                                    onclick=" return alert('Your Leave is rejected you cannot edit this leave')">
                                                    <button type="button" class="btn btn-outline-danger">
                                                        leave is Rejected
                                                    </button>
                                                </a>
                                            @else
                                                <a href="javascript::void(0)"
                                                    onclick=" return alert('Your Leave is approved you cannot edit this leave')">
                                                    <button type="button" class="btn btn-outline-primary">
                                                        leave is approved
                                                    </button>
                                                </a>
                                            @endif
                                            <form method="POST" action="delete-leave/{{ $leave->id }}"
                                                style="display: inline;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-outline-danger"
                                                    onclick="return confirm('Are you sure you want to remove this Leave?');">
                                                    Withdraw
                                                </button>
                                            </form>
                                        </td>
                                        {{-- <td class="ps-1">
                                        @if ($user->parent_id !== null)
                                        {{ $user->parent->phone }}
                                        @else
                                        {{ $user->phone }}
                                        @endif
                                    </td> --}}
                                        {{-- <td class="text-center"><a class="dropdown-item view" href="/studentdetail/{{$leave->id}}"><i class="bx bx-detail"></i> view</a></td> --}}
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td><span>{{ 'No record found' }}</span></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- / Content -->


        <!-- The Modal -->
        <div id="myModal" class="modal" style="padding-top: 50px;">

            <!-- Modal content -->
            <div class="modal-content" style="width: 40%;">
                <div><span class="close text-end">&times;</span></div>
                <h4 class="text-center">Leave Details</h4>
                <input type="hidden" id="leave_id" />
                <div id="leave_applied_on" class="text-center">Leave Applied On: </div>
                <div id="leave_starts_on" class="text-center">Leave Start Date: </div>
                <div id="leave_ends_on" class="text-center">Leave End Date: </div>

                <div id="leave_action" class="text-center">Action: </div>
                <div id="leave_action_taken_on" class="text-center">Action Taken on:</div>
                <br />
                <div class="text-center">Applier's Remarks/Reasons:</div>
                <p id="leave_desc">Some text in the Modal..</p>
                <a href="javaScript:void(0);" class="d-none" id="leave_attachment" target="_blank">View Attachment</a>
                <br />
                <div class="text-center d-none" id="disp_leave_msg">Processing your request</div>
            </div>

        </div>
    </div>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    function usersstatus(id) {

        var mainParent = $('#' + id);


        if ($(mainParent).find('input.cb-value').is(':checked')) {
            $(mainParent).addClass('active');
            var status = "active";
        } else {
            $(mainParent).removeClass('active');
            var status = "in-active";
        }

        var formData = new FormData();

        formData.append('uuid', id);
        formData.append('status', status);
        $.ajax({
            type: "post",
            url: "{{ url('/active-user') }}",
            contentType: 'application/json',
            cache: false,
            contentType: false,
            processData: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: formData,
            success: function(data) {
                if ($.isEmptyObject(data.error)) {
                    success = data.success;
                    const messageContainer = $('#messageContainer');
                    messageContainer.empty();
                    if (data.success) {
                        // Add the success message to the #messageContainer
                        messageContainer.html('<div class="alert alert-success">' + data.success +
                            '</div>');
                        setTimeout(function() {
                            messageContainer.empty();
                        }, 2000);
                    } else {
                        // Add the error message to the #messageContainer
                        messageContainer.html(
                            '<div class="alert alert-danger">Error: Something went wrong</div>');
                        setTimeout(function() {
                            messageContainer.empty();
                        }, 2000);
                    }
                    //  window.location.href = data.success;
                } else {
                    // printErrorMsg(data.error);
                    $.each(data.error, function(field_name, error) {
                        // $(document).find('[name='+field_name+']').after('<span class="text-strong text-danger">' +error+ '</span>')
                        $(document).find('#' + field_name + '').closest('div').after(
                            '<span class="text-strong text-danger">' + error + '</span>')
                    })
                }
            }

        })
    }

    function openingModal(id, desc, leave_applied_date, leave_start, leave_end, status, action_taken, attachment) {
        const leave_id = document.getElementById("leave_id");
        leave_id.value = id;
        var modal = document.getElementById("myModal");
        var btn = document.getElementById("myBtn_" + id);
        var span = document.getElementsByClassName("close")[0];
        let leave_desc = document.getElementById("leave_desc");
        leave_desc.innerText = desc;
        let leave_applied_on = document.getElementById("leave_applied_on");
        leave_applied_on.innerText = "Leave Applied On: " + leave_applied_date;
        let leave_starts_on = document.getElementById("leave_starts_on");
        leave_starts_on.innerText = "Leave Start Date: " + leave_start;
        let leave_ends_on = document.getElementById("leave_ends_on");
        leave_ends_on.innerText = "Leave End Date: " + leave_end;
        action = "";
        if (status == 0) action += "Pending";
        else if (status == 1) action += "Approved";
        else if (status == 2) action += "Rejected";
        let leave_action = document.getElementById("leave_action");
        leave_action.innerText = "Action: " + action;
        let leave_action_taken_on = document.getElementById('leave_action_taken_on');
        if (status == 1 || status == 2) {
            leave_action_taken_on.innerText = "Action Taken On: " + action_taken;
        } else {
            leave_action_taken_on.innerText = "";
        }
        let leave_attachment = document.getElementById('leave_attachment');
        if (attachment) {
            leave_attachment.setAttribute('href', attachment);
            leave_attachment.classList.remove('d-none');
        } else {
            leave_attachment.setAttribute('href', '');
            leave_attachment.classList.add('d-none');
        }
        modal.style.display = "block";
        span.onclick = function() {
            modal.style.display = "none";
        }
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }

    $(document).ready(() => {
        $(".add_status_to_request").on("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            $("#disp_leave_msg").text('Processing your request').removeClass('d-none').addClass(
                'd-block');
            const status = $(this).data('status');
            const leave = document.getElementById("leave_id");
            const leave_id = leave.value;
            let formData = new FormData();
            formData.append('leave_id', leave_id);
            formData.append('status', status);
            $.ajax({
                type: "post",
                url: "{{ url('/addLeaveStatus') }}",
                contentType: 'application/json',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(resp) {
                    const status = resp["status"];
                    if (status == 200) {
                        $(".add_status_to_request").addClass('d-none');
                        $("#disp_leave_msg").text('Leave status updated successfully.');
                        setTimeout(() => {
                            $("#disp_leave_msg").addClass('d-none').text(
                                'Processing your request').removeClass(
                                'd-block');
                            window.location.reload();
                        }, 1500);

                    } else {
                        $("#disp_leave_msg").text(
                            'Something went wrong while updating the status.');
                        setTimeout(() => {
                            $("#disp_leave_msg").addClass('d-none').text(
                                'Processing your request').removeClass(
                                'd-block');
                        }, 1500);
                    }
                },
                error: function(resp) {}
            });
        });
    });
</script>