@extends('lay.dnekcab.retsam')

@section('title')
    {{ $page_title }}
@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
@endsection

@section('page-content')
    <div class="page-content">
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="card-header py-0">
                        <div class="col-md-12">
                            <div class="row align-items-center">
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-10 px-0">
                                            <ol class="breadcrumb align-items-center m-0 px-0">
                                                <li class="breadcrumb-item"><a href="{{ route('meetings.create') }}"><i
                                                            class="fa fa-list" style="position: relative; top: 3px;"></i>
                                                        @lang('global.meeting')</a></li>
                                                <li class="breadcrumb-item active"><i class="fas fa-angle-double-left mx-1"
                                                        style="position: relative; top: 3px"></i>@lang('meetings.list')</li>
                                            </ol>
                                        </div>
                                        <div class="col-md-2 align-items-center d-flex">
                                            {{-- <div id="item-total-count">0</div> --}}
                                            <i class="bx bx-collection mr-1 mr-half-1"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <a href="{{ route('meetings.create') }}"
                                        class="btn btn-primary btn-sm form-control addNewItemsBtn pull-left text-white">
                                        <i class="fa fa-plus"></i> @lang('meetings.add')
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-3">
                            <label>@lang('meetings.date')</label>
                            <input type="date" id="filter-date" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label>@lang('meetings.meeting_destination')</label>
                            <select id="filter-destination" class="form-control">
                                <option value="">@lang('global.all')</option>
                                @foreach ($destinations as $destination)
                                    <option value="{{ $destination->id }}">{{ $destination->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label>@lang('meetings.status')</label>
                            <select id="filter-status" class="form-control">
                                <option value="">@lang('global.all')</option>
                                <option value="pending">@lang('meetings.pending')</option>
                                <option value="approved">@lang('meetings.approved')</option>
                                <option value="completed">@lang('meetings.completed')</option>
                                <option value="cancelled">@lang('meetings.cancelled')</option>
                            </select>
                        </div>
                        <div class="col-md-3 d-flex align-items-end">
                            <button id="filter-btn" class="btn btn-primary w-100">@lang('meetings.filter')</button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table" id="meetings-table">
                            <thead class="sticky-top shadow-sm">
                                <tr>
                                    <th style="text-align:right">#</th>
                                    <th style="text-align:right">@lang('meetings.purpose')</th>
                                    <th style="text-align:right">@lang('meetings.meeting_destination')</th>
                                    <th style="text-align:right">@lang('meetings.date')</th>
                                    <th style="text-align:right">@lang('meetings.time')</th>
                                    <th style="text-align:right">@lang('meetings.status')</th>
                                    <th style="text-align:right">@lang('meetings.action')</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        let meetingsTable;

        $(document).ready(function() {
            meetingsTable = $('#meetings-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('meetings.getMeetings') }}',
                    data: function(d) {
                        d.date = $('#filter-date').val();
                        d.destination = $('#filter-destination').val();
                        d.status = $('#filter-status').val();
                    }
                },
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'purpose',
                        name: 'purpose'
                    },
                    {
                        data: 'destination.name',
                        name: 'destination.name'
                    },
                    {
                        data: 'date',
                        name: 'date'
                    },
                    {
                        data: 'meeting_hours',
                        render: function(data) {
                            return moment(data, 'HH:mm:ss').format('h:mm A');
                        }
                    },
                    {
                        data: 'status',
                        render: function(data) {
                            let btnClass = 'btn-outline-secondary';
                            let icon = 'question-circle';
                            if (data === 'pending') {
                                btnClass = 'btn-outline-warning';
                                icon = 'clock';
                            } else if (data === 'approved') {
                                btnClass = 'btn-outline-success';
                                icon = 'check-circle';
                            } else if (data === 'completed') {
                                btnClass = 'btn-outline-info';
                                icon = 'check-double';
                            } else {
                                btnClass = 'btn-outline-danger';
                                icon = 'times-circle';
                            }
                            return `<button class="btn btn-sm ${btnClass}"><i class="fas fa-${icon}"></i> ${data.charAt(0).toUpperCase() + data.slice(1)}</button>`;
                        }
                    },
                    {
                        data: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            $('#filter-btn').click(function() {
                meetingsTable.ajax.reload();
            });
        });

        // Delete confirmation
        document.addEventListener('DOMContentLoaded', function() {
            $(document).on('click', '.delete-button', function(e) {
                e.preventDefault();
                const url = $(this).data('url');
                Swal.fire({
                    title: '@lang('meetings.confirm_deletion')',
                    text: '@lang('meetings.deletion_warning')',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '@lang('meetings.yes_delete')',
                    cancelButtonText: '@lang('meetings.cancel')'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $('<form>', {
                                'method': 'POST',
                                'action': url
                            })
                            .append('@csrf')
                            .append('@method('DELETE')')
                            .appendTo('body')
                            .submit();
                    }
                });
            });
        });
    </script>
@endsection