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

@section('content')
    <div class="row align-items-center justify-content-between mb-3">
        <div class="col-auto">
            <h5>Turfs</h5>
        </div>
        <div class="col-auto">
            <a href="{{ route('add_turf') }}" class="btn btn-primary">
                <i class="ti tabler-plus me-1"></i> Add Turf
            </a>
        </div>
    </div>


    <div class="card p-0">
        <div class="row mb-3 align-items-center p-3 g-2">
            <div class="col-auto">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <div class="col-auto ms-auto">
                <div class="d-flex align-items-center gap-2">
                    <input type="text" id="customSearch" class="form-control" placeholder="Search..." style="width:180px;">
                    <button class="btn btn-label-secondary">Export</button>
                </div>
            </div>
        </div>

        <div class="table-responsive pt-0 pb-2">
            <table class="table" id="turfTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Turf Name</th>
                        <th>Image</th>
                        <th>Price</th>
                        <th>Location</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="modal fade" id="imageModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Turf Image</h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body text-center">
                    <img id="modalImage" src="" class="img-fluid rounded">
                </div>

            </div>
        </div>
    </div>
    {{-- Delete Modal --}}
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content" style="border-radius:16px;">
                <div class="modal-body text-center p-4">

                    <div class="mb-3">
                        <div style="width:60px;height:60px;background:#fff0f0;border-radius:50%;
                                    display:flex;align-items:center;justify-content:center;margin:0 auto;">
                            <i class="ti tabler-trash" style="font-size:28px;color:#dc3545;"></i>
                        </div>
                    </div>

                    <h5 class="fw-bold mb-1">Delete Turf</h5>

                    <p class="text-muted mb-4">
                        Are you sure? This cannot be undone.
                    </p>

                    <form id="deleteForm" method="POST">
                        @csrf

                        <div class="d-flex justify-content-center gap-2">

                            <button type="button" class="btn btn-label-secondary" style="min-width:110px;"
                                data-bs-dismiss="modal">
                                Cancel
                            </button>

                            <button type="submit" id="submit_btn" class="btn btn-danger" style="min-width:110px;">
                                Delete
                            </button>

                        </div>
                    </form>

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

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {

            var table = $('#turfTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('turf_list_data') }}",

                dom: 'rtip', // Hide default search & length

                pageLength: 10,

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'image',
                        name: 'image',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'price',
                        name: 'price'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // Custom Search
            $('#customSearch').on('keyup', function () {
                table.search(this.value).draw();
            });

            // Custom Page Length
            $('#pageLength').on('change', function () {

                if ($(this).val() == 'All') {
                    table.page.len(-1).draw();
                } else {
                    table.page.len($(this).val()).draw();
                }

            });

            // Delete Button
            $(document).on('click', '.delete-turf-btn', function () {

                let id = $(this).data('id');

                let url = "{{ route('delete_turf', ':id') }}";
                url = url.replace(':id', id);

                $('#deleteForm').attr('action', url);

                $('#deleteModal').modal('show');
            });

            $(document).on('click', '.view-image', function () {

                let image = $(this).data('image');

                $('#modalImage').attr('src', image);

                $('#imageModal').modal('show');

            });

        });

        // Prevent multiple delete submissions
        document.getElementById('submit_btn').addEventListener('click', function (e) {

            e.preventDefault();

            let btn = this;

            btn.disabled = true;
            btn.innerText = 'Processing...';

            document.getElementById('deleteForm').submit();

        });
    </script>
@endsection