@extends('layouts.master')

@section('content')
    <div class="container-xxl">
        <x-breadcrumb model="Trip Plans"></x-breadcrumb>
        <div class="card">

            <div class="card-body">
                <div class="d-flex justify-content-end mb-3">
                    {{-- <a href="{{ route('admin.trip-plans.export') }}" class="btn btn-primary">
                        Export Trip Plans
                    </a> --}}
                </div>
                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">

                        <x-table.header :headers="['Received On', 'name', 'email', 'contact', 'seen', 'Actions']" />

                        <tbody>
                            @forelse ($plans as $plan)
                                <tr>
                                    <td>{{ $loop->iteration }}</td>
                                    <x-table.td>{{ $plan->created_at->toDateString() }}</x-table.td>
                                    <x-table.td>{{ ucwords($plan->first_name . ' ' . $plan->last_name) }}</x-table.td>
                                    <x-table.td>{{ $plan->email }}</x-table.td>
                                    <x-table.td>{{ $plan->contact }}</x-table.td>
                                    <x-table.td>
                                        <span class="visibility-status">
                                            {{ $plan->seen ? 'Viewed' : 'Not viewed' }}
                                        </span>
                                    </x-table.td>
                                    <td style="width:150px">
                                        <div class="actions d-flex">
                                            <a href="#" class="btn btn-sm btn-default" title="View"
                                                data-bs-toggle="modal" data-bs-target="#viewplan{{ $plan->id }}"
                                                data-plan-id="{{ $plan->id }}">
                                                <i class='bx bx-show-alt'></i>
                                            </a>
                                            <x-table.delete_btn
                                                route-destroy="{{ route('admin.trip_plans.destroy', $plan->id) }}" />
                                        </div>
                                    </td>
                                </tr>

                                <div class="modal fade" id="viewplan{{ $plan->id }}" tabindex="-1"
                                    style="display: none;" aria-hidden="true">
                                    <div class="modal-dialog modal-xl" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Trip Plan Details</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                    aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body"></div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                            @endforelse

                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('custom_js')
    <script>
        $(document).on('show.bs.modal', '.modal', function(event) {
            let button = $(event.relatedTarget);
            let planId = button.data('plan-id');
            let modal = $(this);

            let url = "{{ route('admin.trip_plans.show', ':id') }}".replace(':id', planId);

            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                success: function(response) {
                    modal.find('.modal-body').html(response);
                    button.closest('tr').find('.visibility-status').text("Viewed");

                }
            });
        });
    </script>

    @include('_helpers.datatable')
    @include('_helpers.swal_delete')
@endpush