@extends('admin.layout.main')
@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <link href="{{ url('/') }}/assets/plugins/Drag-And-Drop/dist/imageuploadify.min.css" rel="stylesheet" />
@endpush
@section('content')
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">Clubs/Courts </div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i
                                    class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Clubs/Courts </li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#add_court_modal" type="button"
                        class="d-flex align-items-center btn btn-primary font-18"><span>
                            Add Court </span><i class="bx bx-plus ms-1"></i></button>

                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card user-table">
            <div class="card-body">
                <ul class="nav nav-tabs nav-primary" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" data-bs-toggle="tab" href="#courtsTab" role="tab"
                            aria-selected="true">
                            <div class="d-flex align-items-center">
                                <div class="tab-icon"><i class='bx bx-check-circle font-18 me-1'></i></div>
                                <div class="tab-title">Courts</div>
                            </div>
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" data-bs-toggle="tab" href="#clubsTab" role="tab" aria-selected="false">
                            <div class="d-flex align-items-center">
                                <div class="tab-icon"><i class='bx bx-time font-18 me-1'></i></div>
                                <div class="tab-title">Clubs</div>
                            </div>
                        </a>
                    </li>
                </ul>

                <div class="tab-content py-3">
                    <!-- COURTS TAB -->
                    <div class="tab-pane fade show active" id="courtsTab" role="tabpanel">
                        @include('components.courts.table')
                    </div>

                    <!-- CLUBS TAB -->
                    <div class="tab-pane fade" id="clubsTab" role="tabpanel">
                        <div class="table-responsive">
                            <table id="clubs_table" class="table table-striped table-bordered" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Club Name</th>
                                        <th>Location</th>
                                        <th>City</th>
                                        <th>State</th>
                                        <th>Zip</th>
                                        <th>Surface</th>
                                        <th>Amenities</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('components.courts.modals')
    <!-- View Club Modal -->
    <div class="modal fade" id="club_view_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Club Details </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="profile_modal_wrap">
                        <div class="main-body">
                            <div class="row">

                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex flex-column align-items-center text-center">
                                                <div>
                                                    <img src="{{ url('/') }}/assets/images/empty_image_icon.png"
                                                        alt="" class="rounded-circle p-1 bg-primary club-logo">
                                                    <h4>Logo</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-lg-12">
                                    <div class="card">
                                        <div class="card-body">
                                            <form>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">Club Name</label>
                                                    <div class="col-sm-9"><input id="location" type="text"
                                                            class="form-control club-name" readonly>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">Location</label>
                                                    <div class="col-sm-9"><input id="street" type="text"
                                                            class="form-control club-location" readonly>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">City</label>
                                                    <div class="col-sm-9"><input id="state" type="text"
                                                            class="form-control club-city" readonly></div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">State</label>
                                                    <div class="col-sm-9"><input id="state" type="text"
                                                            class="form-control club-state" readonly>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">Zip</label>
                                                    <div class="col-sm-9"><input id="zip" type="text"
                                                            class="form-control club-zip" readonly>
                                                    </div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">Surface</label>
                                                    <div class="col-sm-9"><input type="text"
                                                            class="form-control club-surfaces" readonly></div>
                                                </div>
                                                <div class="row mb-3">
                                                    <label class="col-sm-3 col-form-label">Amenities</label>
                                                    <div class="col-sm-9"><input type="text"
                                                            class="form-control club-amenities" readonly></div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                            </div> <!-- row -->
                        </div> <!-- main-body -->
                    </div> <!-- profile_modal_wrap -->
                </div> <!-- modal-body -->

            </div> <!-- modal-content -->
        </div> <!-- modal-dialog -->
    </div>

    <!-- Add Court Modal -->
    <div class="modal fade" id="add_court_modal" tabindex="-1" aria-labelledby="addCourtLabel" aria-hidden="true">
        <form id="add_court_form" action="{{ route('courts.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-dialog modal-lg modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addCourtLabel">Add New Court</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Court Title</label>
                                <input type="text" class="form-control" name="name"
                                    placeholder="e.g., Piedmont Club">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Location</label>
                                <input type="text" class="form-control" id="location" name="location"
                                    placeholder="City or Area">
                            </div>
                        </div>
                        <div style="margin-bottom:15px;">
                            <input id="searchBox" type="text" class="form-control" placeholder="Search location..."
                                style="width: 100%; padding: 10px;">
                        </div>
                        <!-- Address + Map -->
                        <div class="row mb-3">
                            <div class="col-12">
                                <label class="form-label">Pin Location on Map</label>
                                <div class="row">
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" id="lat" name="latitude"
                                            placeholder="Latitude" readonly />
                                    </div>
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" id="lon" name="longitude"
                                            placeholder="Longitude" readonly />
                                    </div>
                                    <div class="col-lg-6">
                                        <input type="text" class="form-control" id="address" name="address"
                                            placeholder="Address" readonly />
                                    </div>
                                    <div class="col-lg-12">
                                        <div id="map"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label class="form-label">State</label>
                                <input type="text" class="form-control" id="state" name="state">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">ZIP Code</label>
                                <input type="text" class="form-control" id="zip" name="zip">
                            </div>
                        </div>
                        <hr class="my-4">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">Net Count</label>
                                <input type="number" class="form-control" name="net_count"
                                    value="{{ old('net_count', 0) }}">
                            </div>
                            <div class="col-md-6">
                                <label for="surfaces" class="form-label">Surface Type</label>
                                <select name="surfaces" id="surfaces"
                                    class="form-select @error('surfaces') is-invalid @enderror">
                                    <option value="">Select Surface</option>
                                    <option value="Wood" {{ old('surfaces') == 'Wood' ? 'selected' : '' }}>Wood</option>
                                    <option value="Asphalt" {{ old('surfaces') == 'Asphalt' ? 'selected' : '' }}>Asphalt
                                    </option>
                                    <option value="Concrete" {{ old('surfaces') == 'Concrete' ? 'selected' : '' }}>Concrete
                                    </option>
                                </select>
                                @error('surfaces')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="no_indoor_courts" class="form-label">Indoor Courts</label>
                                <input type="number" name="no_indoor_courts" id="no_indoor_courts"
                                    class="form-control @error('no_indoor_courts') is-invalid @enderror" min="0"
                                    max="100" value="{{ old('no_indoor_courts', 0) }}">
                                @error('no_indoor_courts')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6">
                                <label for="no_outdoor_courts" class="form-label">Outdoor Courts</label>
                                <input type="number" name="no_outdoor_courts" id="no_outdoor_courts"
                                    class="form-control @error('no_outdoor_courts') is-invalid @enderror" min="0"
                                    max="100" value="{{ old('no_outdoor_courts', 0) }}">
                                @error('no_outdoor_courts')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Amenities -->
                        <div class="mb-3">
                            <label class="form-label">Amenities</label>
                            <div class="row">
                                @php
                                    $amenities = [
                                        'Food and Drinks',
                                        'Locker Rooms',
                                        'Restrooms',
                                        'Water',
                                        'Lighted Courts',
                                        'Pro Shop',
                                        'Trainers & Lessons',
                                        'Wheelchair Accessibility',
                                    ];
                                @endphp
                                @foreach ($amenities as $amenity)
                                    <div class="col-6 mb-2">
                                        <div class="form-check">
                                            @php
                                                $oldAmenities = old('amenities');
                                                $isChecked = false;
                                                if (is_array($oldAmenities)) {
                                                    $isChecked = in_array($amenity, $oldAmenities);
                                                } elseif (is_string($oldAmenities) && !empty($oldAmenities)) {
                                                    $isChecked = in_array($amenity, explode(',', $oldAmenities));
                                                }
                                            @endphp
                                            <input class="form-check-input" type="checkbox" name="amenities[]"
                                                value="{{ $amenity }}" id="amenity_{{ $loop->index }}"
                                                {{ $isChecked ? 'checked' : '' }}>
                                            <label class="form-check-label" for="amenity_{{ $loop->index }}">
                                                {{ $amenity }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Net Types -->
                        <div class="mb-3">
                            <label class="form-label">Net Types</label>
                            <div class="row">
                                @php
                                    $netTypes = ['Permanent Net', 'Tennis Net', 'Bring Your Own Nets', 'Portable Nets'];
                                @endphp
                                @foreach ($netTypes as $net)
                                    <div class="col-6 mb-2">
                                        <div class="form-check">
                                            @php
                                                $oldNets = old('nets');
                                                $isChecked = false;
                                                if (is_array($oldNets)) {
                                                    $isChecked = in_array($net, $oldNets);
                                                } elseif (is_string($oldNets) && !empty($oldNets)) {
                                                    $isChecked = in_array($net, explode(',', $oldNets));
                                                }
                                            @endphp
                                            <input class="form-check-input" type="checkbox" name="nets[]"
                                                value="{{ $net }}" id="net_{{ $loop->index }}"
                                                {{ $isChecked ? 'checked' : '' }}>
                                            <label class="form-check-label" for="net_{{ $loop->index }}">
                                                {{ $net }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <hr class="my-4">
                        <div class="mb-3">
                            <label for="images" class="form-label">Upload Images</label>
                            <input type="file" name="images[]" id="images"
                                class="form-control @error('images') is-invalid @enderror" multiple accept="image/*">
                            <small class="text-muted">Maximum 10 images, 5MB each. Supported: JPG, PNG, GIF</small>
                            @error('images')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success">Save Court</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    @include('components.courts.scripts')
    <style>
        .pac-container {
            z-index: 999999999 !important;
        }
    </style>

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

            var clubsTable = $('#clubs_table').DataTable({
                lengthChange: false,
                dom: '<"top"lf>rt<"bottom"B><"d-flex justify-content-between align-items-center"ip>',
                buttons: [{
                        extend: 'print',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                scrollX: true,
                responsive: false,
                ajax: '{{ route('clubs.index') }}',
                columns: [{
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'location',
                        name: 'location'
                    },
                    {
                        data: 'city',
                        name: 'city'
                    },
                    {
                        data: 'state',
                        name: 'state'
                    },
                    {
                        data: 'zip',
                        name: 'zip'
                    },
                    {
                        data: 'surfaces',
                        name: 'surfaces'
                    },
                    {
                        data: 'amenities',
                        name: 'amenities'
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                    }
                ],
            });

            clubsTable.buttons().container()
                .appendTo('#courts_table_wrapper .col-md-6:eq(0)');

            $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
                if (e.target.getAttribute('href') === '#clubsTab') {
                    clubsTable.columns.adjust().draw();
                }
            });

        });
    </script>
    <script>
        // view player button fetch user details
        $(document).on('click', '.view-club-btn', function() {
            var clubId = $(this).closest('a').data('club-id');
            fetchClubDetails(clubId);
        });

        // ajax to fetch court details
        function fetchClubDetails(clubId) {
            $.ajax({
                url: "{{ route('clubs.show', ['club' => ':club']) }}".replace(':club', clubId),
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        populateClubModal(response.club);
                    } else {
                        alert('Error fetching club details');
                    }
                },
                error: function() {
                    alert('Error fetching club details');
                }
            });
        }

        function populateClubModal(club) {
            $('#club_view_modal .club-name').val(club.name);
            $('#club_view_modal .club-location').val(club.location);
            $('#club_view_modal .club-city').val(club.city);
            $('#club_view_modal .club-state').val(club.state);
            $('#club_view_modal .club-zip').val(club.zip || '');
            $('#club_view_modal .club-surfaces').val(club.surfaces || '');
            $('#club_view_modal .club-amenities').val(club.amenities || '');

            // Update profile picture
            $('#club_view_modal .club-logo').attr('src', club.logo ||
                '{{ url("/") }}/assets/images/empty_image_icon.png');
            $('#club_view_modal .club-logo').attr('alt', club.name);
        }

        // Destroy slider when modal is closed
        $(document).on('hidden.bs.modal', '#club_view_modal', function() {
            // Clear form fields
            $('#club_view_modal .club-name').val('');
            $('#club_view_modal .club-location').val('');
            $('#club_view_modal .club-city').val('');
            $('#club_view_modal .club-state').val('');
            $('#club_view_modal .club-zip').val('');
            $('#club_view_modal .club-surfaces').val('');
            $('#club_view_modal .club-amenities').val('');
        });
    </script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('body').on('click', '.delete-club', function(e) {
            e.preventDefault()
            var id = $(this).data("club-id");
            new swal({
                title: "Confirmation Alert!",
                text: "Do you want to delete this club?",
                type: "warning",
                showCancelButton: true,
                buttonsStyling: false, // Important: Disable default SweetAlert2 button styling
                customClass: {
                    confirmButton: 'btn btn-danger me-2', // Apply your danger class
                    cancelButton: 'btn btn-secondary' // Apply a secondary class for the cancel button
                },
                confirmButtonText: "Yes",
                cancelButtonText: "No",
                closeOnConfirm: true,
                closeOnCancel: false
            }).then(function(result) {
                if (result.value) {
                    $.ajax({
                        type: 'DELETE',
                        url: `{{ url('clubs/${id}') }}`,
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function(data) {
                            if (data.success === true) {
                                new swal(data.msg, "", "success");
                                setTimeout(function() {
                                    location.reload();
                                }, 2000);
                            } else {
                                new swal("Error!", data.msg, "error");
                            }
                        }
                    });

                } else {
                    swal.fire("Cancelled", "Delete Cancelled", "error");
                }
            });
        });
    </script>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key={{ config('services.google.places_key') }}&libraries=places">
    </script>

    <script src="{{ url('/') }}/assets/plugins/Drag-And-Drop/dist/imageuploadify.min.js"></script>
    <script>
        $(document).ready(function() {

            // Initialize map
            if (document.getElementById('map') !== null) {
                var map = L.map('map').setView([34.950423, -81.926502], 13);
            }

            $('#add_court_modal').on('shown.bs.modal', function() {
                map.invalidateSize();
            });

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);

            let marker;

            // Update marker & inputs
            function setLocation(lat, lng, address, components) {
                if (marker) map.removeLayer(marker);
                marker = L.marker([lat, lng]).addTo(map);

                document.getElementById("lat").value = lat.toFixed(6);
                document.getElementById("lon").value = lng.toFixed(6);
                document.getElementById("address").value = address;
                map.setView([lat, lng], 16);
            }

            // Google Places Autocomplete
            let input = document.getElementById("searchBox");
            let autocomplete = new google.maps.places.Autocomplete(input, {
                fields: ["formatted_address", "geometry", "name"],
            });

            // When user selects a place
            autocomplete.addListener("place_changed", () => {
                let place = autocomplete.getPlace();
                if (!place.geometry) return;

                let lat = place.geometry.location.lat();
                let lng = place.geometry.location.lng();
                let address = place.formatted_address;
                let components = place.address_components;

                setLocation(lat, lng, address, components);
            });

            // Map click also moves pin
            map.on("click", e => {
                let lat = e.latlng.lat;
                let lng = e.latlng.lng;

                // No address? Use lat/lng only
                setLocation(lat, lng, `Lat: ${lat}, Lng: ${lng}`);
            });

            // Initial pin
            setLocation(34.950423, -81.926502, "", null);

            $("#images").imageuploadify();
        });
    </script>
@endpush