@extends('layouts.master')
@section('content')
<div class="h">
@include('inc.header-nav')
<div class="mx-auto container-fluid align-items-center pt-150">
    @include('inc.header-profile')   
    <div class="card px-0 pt-3 mb-9" id="kt_chat_messenger">
        <div class="card-header px-0 border-0" id="kt_chat_messenger_header">
            <div class="card-title">
                <div class="d-flex justify-content-center flex-column me-3">
                    <h3 class="px-6"> Transfer Request</h3>
                    <span class="text-muted mt-1 fw-bold ps-6 fs-7">List of transfer request</span>
                </div>
            </div>
        </div>

        <div class="card-body px-7">
            <table class="table align-middle table-row-dashed table-row-bordered gs-0 gy-4 mb-10"> 
                <thead>
                    <tr class="fw-bold text-muted bg-light">
                        <th class="ps-4 rounded-start">To Dormitory Room</th>
                        <th>From Dormitory Room</th>
                        <th>Notes</th>
                        <th class="rounded-end">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($transferRequest as $request)
                    <tr>
                        <td class="ps-4">
                            <span class="fw-bold badge badge-success">{{ $request->dorm_name }} - Room #{{ $request->room_no }}</span>
                        </td>
                        <td>
                            <span class="fw-bold badge badge-info">{{ $request->from_dorm_name }} - Room #{{ $request->from_room_no }}</span>
                        </td>
                        <td>
                            {{ $request->notes }}
                        </td>
                        <td>
                            @if ($request->transfer_status == 'pending')
                                <span  class="badge badge-light-danger me-2">{{  $request->transfer_status }}</span>
                            @elseif ($request->transfer_status == 'rejected')
                                <span class="badge badge-light-warning me-2">{{  $request->transfer_status }}</span>
                            @else
                             <span  class="badge badge-light-success me-2">{{ $request->transfer_status }}</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="card px-0 pt-3 mb-9" id="kt_chat_messenger">
        <div class="card-header px-0 border-0" id="kt_chat_messenger_header">
            <div class="card-title">
                <div class="d-flex justify-content-center flex-column me-3">
                    <h3 class="px-6">Vacation Request</h3>
                    <span class="text-muted mt-1 fw-bold ps-6 fs-7">List of vacation request</span>
                </div>
            </div>
        </div>

        <div class="card-body px-7">
            <table class="table align-middle table-row-dashed table-row-bordered gs-0 gy-4 mb-10"> 
                <thead>
                    <tr class="fw-bold text-muted bg-light">
                        <th class="ps-4 rounded-start">Dormitory & Room</th>
                        <th>Departure</th>
                        <th>Return</th>
                        <th>Notes</th>
                        <th>Proof</th>
                        <th class="rounded-end">Status</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($vacationRequest as $request)
                    <tr>
                        <td class="ps-4">
                            <span class="fw-bold badge badge-success">{{ $request->dorm_name }} - Room #{{ $request->room_no }}</span>
                        </td>
                        <td>{{ $request->departure_date }} </td>
                        <td>{{ $request->return_date }} </td>
                        <td>
                            {{ $request->notes }}
                        </td>
                        <td>
                            <a target="blank" href="/dormitory/vacation-request/{{$request->attachment}}">
                                <i class="ki-duotone ki-file-down  fs-2 text-success me-2">
                                    <i class="path1"></i>
                                    <i class="path2"></i>
                                    </i>
                            </a>
                        </td>
                        <td>
                            @if ($request->status == 'pending')
                                <span  class="badge badge-light-danger me-2">{{  $request->status }}</span>
                            @elseif ($request->status == 'rejected')
                                <span class="badge badge-light-warning me-2">{{  $request->status }}</span>
                            @else
                             <span  class="badge badge-light-success me-2">{{ $request->status }}</span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

</div>
@endsection
@push('scripts')
<script>
    const { createApp, onMounted, reactive, ref } = Vue
  
    const App = {
      setup() {
        const state = reactive({
            info: [],
            payment_summary: [0,0,0,0],
            last_enrollment: '',
            dormitoryList: [],
            roomList: [],
        })

        const inputs = reactive({
            dorm_id: ''
        })

        let changePasswordModal = null

        async function getInfo()
        {
            state.loading = true
            try
            {
                const response = await axios.get('/me/get-info')
                const { data, status } = response
                state.info = data.data[0],
                state.payment_summary = data.data[1]
                state.last_enrollment = data.data[2]
            } catch(err) { console.log(err) }
            state.loading = false
        }

        function changePassword()
        {
            changePasswordModal = new bootstrap.Modal(document.getElementById('change_password_form'), {})
            changePasswordModal.toggle()
        }

        function cancelChangePassword()
        {
            changePasswordModal.toggle()
        }
        async function getDormitoryList()
        {
            state.loading = true
            try
            {
                const response = await axios.get('/me/dormitories')
                const { data, status } = response
                state.dormitoryList = data.data
            } catch(err) { console.log(err) }
            state.loading = false
        }

        async function getRoomsList(id)
        {
            state.loadin = true
            try
            {
                const response = await axios.get(`/me/rooms?dorm_id=${id}`)
                const { data, status } = response
                state.roomList = data.data
            } catch(err) { console.log(err) }
            state.loading = false
        }

        function requestTransferModal()
        {
            requestModal = new bootstrap.Modal(document.getElementById('request_transfer_form'), {})
            requestModal.toggle()
        }

        function cancelRequest()
        {
            requestModal.toggle()
        }

        function vacationRequestModal()
        {
            vacationModal = new bootstrap.Modal(document.getElementById('vacation_request_form'), {})
            vacationModal.toggle()
        }

        function cancelVacationModal()
        {
            vacationModal.toggle()
        }

        onMounted(()=> {
            var element = document.getElementById('app-container');
            element.classList.remove('d-none');

            (function () {
                'use strict'

                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.querySelectorAll('.needs-validation')

                // Loop over them and prevent submission
                Array.prototype.slice.call(forms)
                    .forEach(function (form) {
                    form.addEventListener('submit', function (event) {
                        if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                        }

                        form.classList.add('was-validated')
                    }, false)
                    })
                })()

            getInfo()
            getDormitoryList()
        })

        return {
            state,
            changePassword,
            cancelChangePassword,
            inputs,
            getDormitoryList,
            getRoomsList,
            requestTransferModal,
            cancelRequest,
            vacationRequestModal,
            cancelVacationModal
        }
      }
    }

    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");

  </script>
@endpush