@extends('layouts.master')
@section('content')
    <div class="card" id="app">
        <div class="card-header card-custom-bg d-flex flex-row align-items-center justify-content-between">
            <h5>Leave List</h5>
            <a href="{{route('leaves.create')}}" class="btn btn-sm btn-primary" id="add-student-btn">Add New</a>
        </div>
        <div class="card-body">
            <div class="row ">
                <div class="table-responsive">
                    <table class="table table-strip">
                        <thead class="thead-light">
                            <tr>
                                <th>SN</th>
                                <th>Leave Reason</th>
                                <th>Leave Type</th>
                                <th>From Date</th>
                                <th>To Date</th>
                                <th>Request Days</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($leave_list as $leave)
                                <tr>
                                    <td>{{ $leave->id }}</td>
                                    <td>{{ $leave->leave_reason }}</td>
                                    <td>{{ $leave->leaveType->name }}</td>
                                    <td>{{ $leave->from_date }}</td>
                                    <td>{{ $leave->to_date }}</td>
                                    <td>{{ $leave->requested_days }}</td>
                                    <td>{!! getStatusBadge($leave->status) !!}</td>
                                    <td class="d-flex justify-content-start">
                                        @if ($leave->status!=Status::PENDING)
                                        <a href="{{route('leaves.details', $leave->id)}}" class="btn btn-sm btn-primary mr-1" id="add-student-btn">Details</a>
                                        @else
                                        <a href="{{route('leaves.edit', $leave->id)}}" class="btn btn-sm btn-primary mr-1" id="add-student-btn">Edit</a>
                                        @endif

                                        <form action="{{ route('leaves.destroy', $leave->id) }}" method="POST"
                                            style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-danger"
                                                onclick="return confirm('Are you sure you want to delete this building floor?')">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

@endsection


@push('scripts')
<script>
    const app = Vue.createApp({
        data() {
            return {
                message: 'Hello from Vue 3!',
                inputValue: ''
            }
        },
        methods: {
            changeMessage() {
                this.message = 'Message changed!';
            }
        }
    });

    app.mount('#app');
</script>
@endpush