@extends('layout')

@inject('carbon', 'Carbon\Carbon')
@inject('recovrey', 'App\Models\Recovrey')

@section('content')
    <div class=" page-header-light">
        <div class="d-flex justify-content-between align-items-center mx-3">
            <div class="d-flex flex-column tailwind-scope">
                <h4 class="text-white text-xl sm:text-2xl font-bold">Propriétés & Maintenance</h4>
                <p class="text-white text-sm">Gestion des logements</p>
            </div>
            @include('shared.navbar')
        </div>
        @include('propertie._searchv3')
    </div>
    <div class=" ">
        
        <div x-data="{ tab: 'Logements' }">
            <div class="space-y-6 p-4 ">
                <!-- Tabs -->
                <div class="tailwind-scope">

                    <div
                    class="  flex gap-8 mb-3 border-b border-gray-[#E2E9FC]">
                    <button class=" px-2 py-2 text-sm font-medium focus:outline-none mr-3 xl:mr-5 " :class="tab === 'Logements' ? 'border-b-4 border-[#31B08F] text-[#212633] font-bold' : 'text-[#8E9ABB] '"
                    @click="tab = 'Logements'">
                    
                    Logements
                    <span class="rounded-2xl px-2 py-1 ml-1 text-xs text-white" :class="tab === 'Logements' ? 'bg-[#31B08F]' : 'bg-[#8E9ABB] '">{{ $allPropertiesCount }}</span>
                </button>
                
                <button class=" px-2 py-2 text-sm font-medium focus:outline-none mr-3 xl:mr-5 "
                :class="tab === 'Propriétaires' ? 'border-b-4 border-[#31B08F] text-[#212633] font-extrabold' : 'text-[#8E9ABB] '" @click="tab = 'Propriétaires'">
                Propriétaires
                <span class="rounded-2xl px-2 py-1 ml-1  text-xs text-white" :class="tab === 'Propriétaires' ? 'bg-[#31B08F]' : 'bg-[#8E9ABB] '">{{ $proprietaires->count() }}</span>
            </button>
            {{-- <button class=" px-2 py-2 text-sm font-medium focus:outline-none mr-3 xl:mr-5 "
            :class="tab === 'Contrats' ? 'border-b-4 border-[#31B08F] text-[#212633] font-extrabold' : 'text-[#8E9ABB] '" @click="tab = 'Contrats'">
            Contrats
            <span class="rounded-2xl px-2 py-1 ml-1  text-xs text-white" :class="tab === 'Contrats' ? 'bg-[#31B08F]' : 'bg-[#8E9ABB] '">{{ $contractsCount }}</span>
            </button> --}}
            
            
        </div>
    </div>
  @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
                <!-- Tab Contents -->
                <div x-show="tab === 'Logements'" class="transition ">
                  
                        @include('propertie.partials._propertiesCards')
                  
                </div>
    
                <div x-show="tab === 'Propriétaires'" class="transition ">
                  
                        @include('propertie.partials._proprietaires')
                    
                </div>
    
                <div x-show="tab === 'Contrats'" class="transition ">
                  
                        @include('propertie.partials._contrats')
                    
                </div>
    
                
            </div>
        </div>
        {{-- <form id="bulkDeleteForm" action="{{ route('property.bulkDelete') }}" method="POST"> --}}
            {{-- @csrf --}}
            {{-- @method('DELETE')
            <button type="button" class="btn btn-secondary btn-sm mb-3" id="openBulkDeleteModal" disabled>
                Supprimer les logements sélectionnés
            </button> --}}
            {{-- <table class="table table-responsive table-striped font-size-sm">
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>Date de création</th>
                        <th>Nom</th>
                        <th>uid</th>
                        <th>Propriétaire</th>
                        <th>Pays</th>
                        <th>Connecté RU</th>
                        <th>Adresse</th>
                        <th>disponibilité</th>

                        <th>Url dans site Property</th>
                        <th>code</th>


                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($properties as $key => $c)
                    <tr>
                        <td><input type="checkbox" name="ids[]" value="{{ $c->id }}" class="delete-checkbox"></td>
                        <td>{{ $c->created_at }}</td>
                        <td><a href="{{ route('property.show', $c->id) }}">{{ $c->name }}</a></td>
                        <td>{{ $c->uid }}</td>
                        <td>{{ $owner->where('id', $c->tll_owner_id)->value('name') }}</td>
                        <td>{{ $c->state }}</td>
                        <td>
                            @if ($c->is_active == '1')
                            <span class="badge badge-success">Connecté</span>
                            @else
                            <span class="badge badge-danger">Non connecté</span>
                            @endif
                        </td>
                        <td>{{ $c->street }}</td>
                        <td>
                            @if ($c->is_available == '1')
                            <span class="badge badge-success">Actif</span>
                            @else
                            <span class="badge badge-danger">Non actif</span>
                            @endif
                        </td>

                        <td><a href="{{ $c->property_url }}">{{ $c->property_url }}</a></td>
                        <td>{{ $c->uid }}</td>

                        <td class="text-center">
                            <div class="list-icons">
                                <div class="dropdown">
                                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                                        <i class="icon-menu9"></i>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-right">
                                        <a href="{{ route('property.edit', $c->id) }}" class="dropdown-item"><i
                                                class="icon-file-excel"></i> Modifier</a>
                                        <button type="button" data-id="{{ $c->id }}" class="dropdown-item delete-btn">
                                            <i class="icon-fixed-width icon-trash"></i> Supprimer
                                        </button>
                                        <button type="button" data-id="{{ $c->id }}" data-available="{{ $c->is_available }}"
                                            class="dropdown-item availability-btn">
                                            <i class="icon-fixed-width icon-pencil"></i> Changer disponibilité
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table> --}}
            {{--
        </form> --}}

        <!-- Modal for Bulk Delete -->
        <div class="modal fade" id="bulkDeleteModal" tabindex="-1" role="dialog" aria-labelledby="bulkDeleteModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="bulkDeleteModalLabel">Êtes-vous sûr?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Vous ne pourrez pas récupérer ces informations!
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="button cancel-button" data-dismiss="modal">Annuler</button>
                        <button type="button" class="button button-primary" id="confirmBulkDeleteBtn">Supprimer</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for Individual Delete -->
        <div class="modal fade" id="individualDeleteModal" tabindex="-1" role="dialog"
            aria-labelledby="individualDeleteModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="individualDeleteModalLabel">Êtes-vous sûr?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        Vous ne pourrez pas récupérer ces informations!
                    </div>
                    <div class="modal-footer">
                        <form id="confirmIndividualDeleteForm" action="" method="post">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="button button-primary">Supprimer</button>
                            <button type="button" class="button cancel-button" data-dismiss="modal">Annuler</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="availibilityModal" tabindex="-1" role="dialog" aria-labelledby="availibilityModal"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="availibilityModal">Êtes-vous sûr?</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form id="confirmAvailibilityForm"
                        action="{{ route('property-update-availibility', ['id' => ':propertyId']) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- Hidden fields to hold the property ID and availability status -->
                        <input type="hidden" id="property_id" name="property_id">
                        <input type="hidden" id="is_available" name="is_available">

                        <!-- Modal Content -->
                        <div class="modal-body">
                            Are you sure you want to update availability?
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="button button-primary">Confirm</button>
                            <button type="button" class="button cancel-button" data-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            // Toggle select/deselect all checkboxes
            $('#selectAll').on('change', function () {
                var checked = this.checked;
                $('input[name="ids[]"]').prop('checked', checked);
                toggleBulkDeleteButton();
            });

            // Toggle the bulk delete button based on the checkbox selection
            function toggleBulkDeleteButton() {
                var hasChecked = $('input[name="ids[]"]:checked').length > 0;
                $('#openBulkDeleteModal').prop('disabled', !hasChecked);
                $('#openBulkDeleteModal').toggleClass('btn-secondary', !hasChecked);
                $('#openBulkDeleteModal').toggleClass('btn-danger', hasChecked);
            }

            // Enable/disable the bulk delete button based on individual checkbox changes
            $(document).on('change', 'input[name="ids[]"]', function () {
                toggleBulkDeleteButton();
            });
            $(document).on('click', '.availability-btn', function () {
                let propertyid = $(this).data('id');
                let isAvailable = $(this).data('available');
                $('#is_available').val(isAvailable == 1 ? 0 : 1);
                $('#property_id').val(propertyid);
                // Set form action dynamically
                $('#availibilityModal').modal('show');
                // $('#confirmAvailibilityForm').attr('action', `/property/update-availibility/${propertyid}`);

            });
            // Show modal for bulk delete
            $('#openBulkDeleteModal').on('click', function () {
                if ($('input[name="ids[]"]:checked').length) {
                    $('#bulkDeleteModal').modal('show');
                } else {
                    alert('Veuillez sélectionner au moins un logement à supprimer.');
                }
            });

            // Confirm bulk delete
            $('#confirmBulkDeleteBtn').on('click', function () {
                $('#bulkDeleteForm').submit();
            });

            // Open individual delete confirmation modal
            $('.delete-btn').on('click', function () {
                var id = $(this).data('id');
                $('#confirmIndividualDeleteForm').attr('action', window.location.href + '/' + id);
                $('#individualDeleteModal').modal('show');
            });
            // $('.availability-btn').on('click', function () {
            //     let propertyId = $(this).data('id');
            //     let isAvailable = $(this).data('available');

            //     // Set hidden inputs with the current values
            //     $('#property_id').val(propertyId);
            //     $('#is_available').val(isAvailable);

            //     // Show the modal
            //     $('#availibilityModal').modal('show');
            // });

            function submitUpdateAvailibility() {

                // Prevent the default form submission
                // event.preventDefault();

                // Serialize form data
                var formData = $(this).serialize();
                var form = $(this);
                let propertyId = $(this).data('id');
                let isAvailable = $(this).data('available');
                console.log(formData);
                // Send form data via AJAX
                $.ajax({
                    url: `{{ route('property-update-availibility', ['id' => ':propertyId']) }}`.replace(':propertyId', propertyId), // Replace placeholder with the actual property_id
                    method: 'POST',
                    data: formData,
                    success: function (response) {

                        // Handle successful response from the server
                        if (response.error) {
                            hideLoader();
                            $('.alertDates').removeClass('d-none').html(response.error);
                        }

                        if (response.redirect) {
                            // Redirect to the specified URL
                            window.location.reload();
                        }

                        if (response.success === true) {
                            // Redirect to the specified URL
                            window.location.reload();
                        }
                    },
                    error: function (xhr, status, error) {
                        // Handle errors
                        console.error(xhr.responseText);
                    }
                });
            };
            $(document).on('click', '#confirmAvailibilityForm', function () {
                submitUpdateAvailibility();
            }).submit();
        });
    </script>
@endsection