@extends('layouts.sidebar')

@section('content')
    <div class="container mx-auto ">
        <div class="flex justify-between py-5">
            <div>
                <h2 class="text-xl font-bold ">Properties</h2>
            </div>
            <div>

                <button class="px-4 py-2 mb-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
                    onclick="openModal1('addItemModal')">Add Property</button>
                <a href="{{ route('property.export') }}"
                    class="px-4 py-2 mb-2 text-sm font-bold text-white bg-blue-500 rounded hover:bg-blue-700">
                    Export Property
                </a>
            </div>

        </div>
        @if (session('success'))
            <div class="px-4 py-2 mb-4 text-green-800 bg-green-200 border border-green-600 rounded">
                {{ session('success') }}
            </div>
        @endif
        <div class="overflow-x-auto">
            <table id="propertiesTable"
                class="min-w-full text-sm text-center bg-orange-500 border-collapse rounded shadow-md">
                <thead class="bg-orange-500">
                    <tr>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">View Units
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Property
                            Name</th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Address
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">No. Units
                        </th>
                        <th class="px-6 py-3 text-xs font-medium tracking-wider text-gray-700 uppercase">Edit</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-600">

                    <!-- Table rows will be populated dynamically by DataTables -->
                </tbody>
            </table>
        </div>

    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#propertiesTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('properties.create') }}",
                columns: [{
                        data: 'view_units',
                        name: 'view_units',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'property_name',
                        name: 'property_name'
                    },
                    {
                        data: 'full_address',
                        name: 'full_address'
                    },
                    {
                        data: 'unit_count',
                        name: 'unit_count'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                language: {
                    paginate: {
                        previous: '&laquo;',
                        next: '&raquo;'
                    }
                }
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            const cities = [
                "Angeles", "Antipolo", "Bacolod", "Bacoor", "Bago", "Baguio", "Bais", "Balanga",
                "Batac", "Batangas City", "Bayawan", "Baybay", "Bayugan", "Biñan", "Bislig",
                "Bogo", "Borongan", "Butuan", "Cabadbaran", "Cabanatuan", "Cabuyao",
                "Cadiz", "Cagayan de Oro", "Calamba", "Calapan", "Calbayog", "Caloocan",
                "Candon", "Canlaon", "Carcar", "Catbalogan", "Cauayan", "Cavite City",
                "Cebu City", "Cotabato City", "Dagupan", "Danao", "Dapitan", "Dasmariñas",
                "Davao City", "Digos", "Dipolog", "Dumaguete", "El Salvador", "Escalante",
                "Gapan", "General Santos", "General Trias", "Gingoog", "Guihulngan", "Himamaylan",
                "Ilagan", "Iligan", "Iloilo City", "Imus", "Iriga", "Isabela", "Kabankalan",
                "Kidapawan", "Koronadal", "La Carlota", "Lamitan", "Laoag", "Lapu-Lapu", "Las Piñas",
                "Legazpi", "Ligao", "Lipa", "Lucena", "Maasin", "Mabalacat", "Makati", "Malabon",
                "Malaybalay", "Malolos", "Mandaluyong", "Mandaue", "Manila", "Marawi", "Marikina",
                "Masbate City", "Mati", "Meycauayan", "Muñoz", "Muntinlupa", "Naga (Camarines Sur)",
                "Naga (Cebu)", "Navotas", "Olongapo", "Ormoc", "Oroquieta", "Ozamiz", "Pagadian",
                "Palayan", "Panabo", "Parañaque", "Pasay", "Pasig", "Passi", "Puerto Princesa",
                "Quezon City", "Roxas", "Sagay", "Samal", "San Carlos (Negros Occidental)",
                "San Carlos (Pangasinan)", "San Fernando (La Union)", "San Fernando (Pampanga)",
                "San Jose", "San Jose del Monte", "San Juan", "San Pablo", "San Pedro", "Santa Rosa",
                "Santiago", "Silay", "Sipalay", "Sorsogon City", "Surigao City", "Tabaco",
                "Tabuk", "Tacloban", "Tacurong", "Tagaytay", "Tagbilaran", "Taguig", "Tagum",
                "Talisay (Cebu)", "Talisay (Negros Occidental)", "Tanauan", "Tandag", "Tangub",
                "Tanjay", "Tarlac City", "Tayabas", "Toledo", "Trece Martires", "Tuguegarao",
                "Urdaneta", "Valencia", "Valenzuela", "Victorias", "Vigan", "Zamboanga City"
            ];

            const cityZipMap = {
                "Angeles": "2009",
                "Antipolo": "1870",
                "Bacolod": "6100",
                "Bacoor": "4102",
                "Bago": "6101",
                "Baguio": "2600",
                "Bais": "6206",
                "Balanga": "2100",
                "Batac": "2906",
                "Batangas City": "4200",
                "Bayawan": "6221",
                "Baybay": "6521",
                "Bayugan": "8502",
                "Biñan": "4024",
                "Bislig": "8311",
                "Bogo": "6010",
                "Borongan": "6800",
                "Butuan": "8600",
                "Cabadbaran": "8605",
                "Cabanatuan": "3100",
                "Cabuyao": "4025",
                "Cadiz": "6121",
                "Cagayan de Oro": "9000",
                "Calamba": "4027",
                "Calapan": "5200",
                "Calbayog": "6710",
                "Caloocan": "1400",
                "Candon": "2710",
                "Canlaon": "6223",
                "Carcar": "6019",
                "Catbalogan": "6700",
                "Cauayan": "3305",
                "Cavite City": "4100",
                "Cebu City": "6000",
                "Cotabato City": "9600",
                "Dagupan": "2400",
                "Danao": "6004",
                "Dapitan": "7101",
                "Dasmariñas": "4114",
                "Davao City": "8000",
                "Digos": "8002",
                "Dipolog": "7100",
                "Dumaguete": "6200",
                "El Salvador": "9017",
                "Escalante": "6124",
                "Gapan": "3105",
                "General Santos": "9500",
                "General Trias": "4107",
                "Gingoog": "9014",
                "Guihulngan": "6214",
                "Himamaylan": "6108",
                "Ilagan": "3300",
                "Iligan": "9200",
                "Iloilo City": "5000",
                "Imus": "4103",
                "Iriga": "4431",
                "Isabela": "9805",
                "Kabankalan": "6111",
                "Kidapawan": "9400",
                "Koronadal": "9506",
                "La Carlota": "6130",
                "Lamitan": "7302",
                "Laoag": "2900",
                "Lapu-Lapu": "6015",
                "Las Piñas": "1740",
                "Legazpi": "4500",
                "Ligao": "4504",
                "Lipa": "4217",
                "Lucena": "4301",
                "Maasin": "6600",
                "Mabalacat": "2010",
                "Makati": "1200",
                "Malabon": "1470",
                "Malaybalay": "8700",
                "Malolos": "3000",
                "Mandaluyong": "1550",
                "Mandaue": "6014",
                "Manila": "1000",
                "Marawi": "9700",
                "Marikina": "1800",
                "Masbate City": "5400",
                "Mati": "8200",
                "Meycauayan": "3020",
                "Muñoz": "3119",
                "Muntinlupa": "1770",
                "Naga (Camarines Sur)": "4400",
                "Naga (Cebu)": "6037",
                "Navotas": "1485",
                "Olongapo": "2200",
                "Ormoc": "6541",
                "Oroquieta": "7207",
                "Ozamiz": "7200",
                "Pagadian": "7016",
                "Palayan": "3132",
                "Panabo": "8105",
                "Parañaque": "1700",
                "Pasay": "1300",
                "Pasig": "1600",
                "Passi": "5037",
                "Puerto Princesa": "5300",
                "Quezon City": "1100",
                "Roxas": "5800",
                "Sagay": "6122",
                "Samal": "8119",
                "San Carlos (Negros Occidental)": "6127",
                "San Carlos (Pangasinan)": "2420",
                "San Fernando (La Union)": "2500",
                "San Fernando (Pampanga)": "2000",
                "San Jose": "5100",
                "San Jose del Monte": "3023",
                "San Juan": "1500",
                "San Pablo": "4000",
                "San Pedro": "4023",
                "Santa Rosa": "4026",
                "Santiago": "3311",
                "Silay": "6116",
                "Sipalay": "6113",
                "Sorsogon City": "4700",
                "Surigao City": "8400",
                "Tabaco": "4511",
                "Tabuk": "3800",
                "Tacloban": "6500",
                "Tacurong": "9800",
                "Tagaytay": "4120",
                "Tagbilaran": "6300",
                "Taguig": "1630",
                "Tagum": "8100",
                "Talisay (Cebu)": "6045",
                "Talisay (Negros Occidental)": "6115",
                "Tanauan": "4232",
                "Tandag": "8300",
                "Tangub": "7214",
                "Tanjay": "6204",
                "Tarlac City": "2300",
                "Tayabas": "4327",
                "Toledo": "6038",
                "Trece Martires": "4109",
                "Tuguegarao": "3500",
                "Urdaneta": "2428",
                "Valencia": "8709",
                "Valenzuela": "1440",
                "Victorias": "6119",
                "Vigan": "2700",
                "Zamboanga City": "7000"
                // Add more cities and their zip codes as needed
            };

            const citySelect = $('#city');
            const zipInput = $('#zip');

            // Sort cities alphabetically
            cities.sort();

            cities.forEach(city => {
                citySelect.append(new Option(city, city));
            });

            citySelect.on('change', function() {
                const selectedCity = $(this).val();
                const zipCode = cityZipMap[selectedCity] || '';
                zipInput.val(zipCode);
            });
        });
    </script>
    <script>
        function openModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.classList.remove('hidden');
        }

        function closeModal(modalId) {
            var modal = document.getElementById(modalId);
            modal.classList.add('hidden');
        }



        function submitEditItemForm(event, propertyId) {
            event.preventDefault(); // Prevent the default form submission

            // Get the form element
            var form = document.getElementById('editItemForm' + propertyId);

            // Submit the form
            form.submit();
        }

        function openModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'flex'; // Change from 'none' to 'flex' to properly show the modal
        }

        function closeModal1(modalId) {
            var modal = document.getElementById(modalId);
            modal.style.display = 'none'; // Hide the modal by setting display to 'none'
        }
    </script>

    <div id="addItemModal" class="fixed inset-0 flex items-center justify-center hidden bg-gray-500 bg-opacity-75">
        <div class="w-1/2 overflow-y-auto bg-white rounded-lg">
            <!-- Modal header -->
            <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                <h5 class="font-bold text-white">Add Property</h5>
                <button onclick="closeModal1('addItemModal')" class="text-white">&times;</button>
            </div>

            <form action="{{ route('properties.store') }}" method="POST" class="p-6 bg-white rounded shadow-md">
                @csrf

                <!-- Property Name -->
                <div class="mb-4">
                    <label for="property-name" class="block mb-2 text-sm font-bold text-gray-700">Property
                        Name:</label>
                    <input required type="text" id="property-name" name="property_name"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                        placeholder="Enter property name">
                </div>

                <!-- Street Address -->
                <div class="mb-4">
                    <label for="street-address" class="block mb-2 text-sm font-bold text-gray-700">Street
                        Address:</label>
                    <input required type="text" id="street-address" name="street_address"
                        class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                        placeholder="1234 Main St">
                </div>

                <!-- City, State, Zip -->
                <div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-3">
                    <div class="mb-4">
                        <label for="city" class="block mb-2 text-sm font-bold text-gray-700">City:</label>
                        <select required id="city" name="city"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline">
                            <option value="" disabled selected>Select a city</option>
                        </select>
                    </div>
                    <div>
                        <label for="state" class="block mb-2 text-sm font-bold text-gray-700">State:</label>
                        <input required type="text" id="state" name="state"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="State" value="Philippines">
                    </div>
                    <div>
                        <label for="zip" class="block mb-2 text-sm font-bold text-gray-700">Zip Code:</label>
                        <input required type="text" id="zip" name="zip"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border border-black rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="Zip Code">
                    </div>
                </div>

                <hr class="my-4">

                <button type="submit" class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded hover:bg-blue-700">Save
                    Property</button>
            </form>
        </div>
    </div>



    @foreach ($property as $property)
        <div id="editItemModal{{ $property->id }}"
            class="fixed inset-0 flex items-center justify-center hidden bg-gray-500 bg-opacity-75">
            <div class="w-1/2 overflow-y-auto bg-white rounded-lg">
                <!-- Modal header -->
                <div class="flex items-center justify-between px-4 py-2 bg-blue-500">
                    <h5 class="font-bold text-white">Edit Property</h5>
                    <button onclick="closeModal1('editItemModal{{ $property->id }}')" class="text-white">&times;</button>
                </div>

                <!-- Edit Property Form -->
                <form id="editItemForm{{ $property->id }}" action="{{ route('properties.update', $property->id) }}"
                    method="POST" class="p-10">
                    @csrf
                    @method('PUT')

                    <div class="mb-4">
                        <label for="property-name{{ $property->id }}"
                            class="block mb-2 text-sm font-bold text-gray-700">Property Name:</label>
                        <input required type="text" id="property-name{{ $property->id }}" name="property_name"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="Enter property name" value="{{ old('property_name', $property->property_name) }}">
                    </div>
                    <div class="mb-4">
                        <label for="street-address{{ $property->id }}"
                            class="block mb-2 text-sm font-bold text-gray-700">Street Address:</label>
                        <input required type="text" id="street-address{{ $property->id }}" name="street_address"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="1234 Main St" value="{{ old('street_address', $property->street_address) }}">
                    </div>
                    <div class="flex mb-4 -mx-2">
                        <div class="w-1/2 px-2">
                            <label for="city{{ $property->id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">City:</label>
                            <input required type="text" id="city{{ $property->id }}" name="city"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="City" value="{{ old('city', $property->city) }}">
                        </div>
                        <div class="w-1/4 px-2">
                            <label for="state{{ $property->id }}"
                                class="block mb-2 text-sm font-bold text-gray-700">State:</label>
                            <input required type="text" id="state{{ $property->id }}" name="state"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="State" value="{{ old('state', $property->state) }}">
                        </div>
                        <div class="w-1/4 px-2">
                            <label for="zip{{ $property->id }}" class="block mb-2 text-sm font-bold text-gray-700">Zip
                                Code:</label>
                            <input required type="text" id="zip{{ $property->id }}" name="zip"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                placeholder="Zip Code" value="{{ old('zip', $property->zip) }}">
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="flex justify-end">
                        <button type="submit"
                            class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700">Update</button>
                    </div>

                </form>
            </div>
        </div>
    @endforeach
@endsection