@extends('layouts.admin.index')

@section('content')
<div class="card">
    <div class="card-header">
        {{ trans('cruds.booking_list') }}
    </div>

    <div class="card-body">
        <div class="booking_table_wrapper">
            <div class="table-responsive"  style="width: 1250px">
                <table id="bookingTable" class="table table-bordered  nowrap w-100">
                    <thead>
                        <tr>
                            <th>Sl</th>
                            <th>{{ trans('cruds.project_name') }}</th>
                            <th>{{ trans('cruds.block_name') }}</th>
                            <th>{{ trans('cruds.road_name') }}</th>
                            <th>{{ trans('cruds.plot_facing') }}</th>
                            <th>{{ trans('cruds.plot') }}</th>
                            <th>{{ trans('cruds.plot_size') }}</th>
                            <th>{{ trans('cruds.sales_executive_person') }}</th>
                            <th>{{ trans('cruds.unit_name') }}</th>
                            <th>{{ trans('cruds.reserve_reason') }}</th>
                            <th>{{ trans('cruds.upto_reserve_date') }}</th>
                            <th>{{ trans('cruds.status') }}</th>
                            <th>{{ trans('cruds.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($reserve_show as $key=>$show)
                        <tr data-entry-id="{{ $show->id }}">
                            <td>{{ $key + 1 }}</td>
                            <td>{{ $show->project->project_name ?? '' }}</td>
                            <td>{{ $show->block->block_name ?? '' }}</td>
                            <td>{{ $show->road->road_name ?? '' }}</td>
                            <td>{{ $show->plot_facing ?? '' }}</td>
                            <td>{{ $show->plot->plot_name ?? '' }}</td>
                            <td>{{ $show->plot_size ?? '' }}</td>
                            <td>{{ $show->executive->name ?? '' }}</td>
                            <td>{{ $show->unit->unit_name ?? '' }}</td>
                            <td>{{ $show->reserve_reason ?? '' }}</td>
                            <td>{{ $show->reserve_upto_date ?? '' }}</td>
                            <td>{{ $show->status ?? '' }}</td>
                            
                            <td style="display:flex; gap:5px">
                                @if(edit())
                                <a class="btn btn-xs btn-info" href="{{ route("admin.reserve.edit", $show->id) }}">
                                    <i class="fas fa-edit"></i>
                                </a>
                                @endif

                                @if(delete())
                                <form action="{{ route("admin.reserve.destroy", $show->id) }}" method="POST" onsubmit="return confirm('{{ trans('cruds.areYouSure') }}');" style="display: inline-block;">
                                    @method('DELETE')
                                    @csrf
                                    <button type="submit" class="btn btn-xs btn-danger">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                                @endif
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        
    </div>
</div>
@endsection

@section('scripts')
@parent
<script>
    $(document).ready(function () {
        function initDataTable() {
            let table = $('#bookingTable');
            if ($.fn.DataTable.isDataTable(table)) {
                table.DataTable().clear().destroy();
            }

            table.DataTable({
                responsive: false,
                pageLength: 10
            });
        }

        // Initial table load
        initDataTable();

        function filterData() {
            let project_id = $('#project_filter').val();
            let branch_id = $('#branch_filter').val();
            let unit_id = $('#unit_filter').val();
            let executive_id = $('#executive_filter').val();

            $.ajax({
                url: "{{ route('admin.booking.index') }}",
                type: "GET",
                data: {
                    project_id,
                    branch_id,
                    unit_id,
                    executive_id
                },
                success: function (data) {
                    let newContent = $(data).find('.booking_table_wrapper').html();
                    $('.booking_table_wrapper').html(newContent);

                    // IMPORTANT: Call after content is replaced
                    initDataTable();
                },
                error: function () {
                    alert('Something went wrong while loading filtered data.');
                }
            });
        }

        $('#project_filter, #branch_filter, #unit_filter, #executive_filter').on('change', function () {
            filterData();
        });
    });
</script>

@endsection