@extends('layouts.app')

@section('title', 'Close Properties')

@push('css')

@endpush

@section('content')
<x-content-body>

    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-filter id="propertyFilter">
        <div class="row g-3">
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Middle Initial')" />
                <x-text-input placeholder="Enter Middle Initial" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Last Name')" />
                <x-text-input placeholder="Enter Last Name" />
            </div>
            <div class="col-md-3">
                <x-input-label for="Lead Source" :value="__('Company')" />
                <x-text-input placeholder="Enter Company" />
            </div>
        </div>
        <div class="text-end mt-2">
            <a href="#" class="btn btn-sm btn-primary"><i class="fas fa-calendar me-3"></i>Search</a>
        </div>
    </x-filter>


    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Closed Properties</h4>

            <div class="btn-group">
                <form method="POST" action="{{ route('close-property.create') }}" x-data="{ propertyType: ''}" x-ref="propertyForm">
                    @csrf
                    <input type="hidden" name="property_type" id="property_type" x-model="propertyType">
                    <x-button type="button" class="btn-primary" @click="propertyType = 'residential'; $nextTick(() => $refs.propertyForm.submit())">
                        New Residential Properties
                    </x-button>
                    <x-button type="button" class="btn-primary me-2" @click="propertyType = 'commercial'; $nextTick(() => $refs.propertyForm.submit())">
                        New Commercial Properties
                    </x-button>
                    <x-button type="button" class="btn-primary me-2" @click="propertyType = 'agriculture'; $nextTick(() => $refs.propertyForm.submit())">
                        New Agriculture Property
                    </x-button>
                </form>
            </div>
        </x-slot:title>

        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="residential-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#residential-closeing-property" type="button" role="tab"
                    aria-controls="residential-pending-property" aria-selected="true">Residential</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="commercial-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#commercial-closeing-property" type="button" role="tab"
                    aria-controls="commercial-closeing-property" aria-selected="false">Commercial</button>
            </li>
            {{-- <li class="nav-item" role="presentation">
                <button class="nav-link" id="buyerLender-pending-property-tab-btn" data-bs-toggle="pill"
                    data-bs-target="#buyerLender-pending-property" type="button" role="tab"
                    aria-controls="buyer-lender-process-property" aria-selected="false">Agriculture</button>
            </li> --}}
        </ul>
        <div class="tab-content" id="pills-tabContent">

            @foreach (['residential' => $residential, 'commercial' => $commercial] as $tab => $properties)

            <div class="tab-pane fade @if ($loop->first) show active @endif" id="{{ $tab }}-closeing-property"
                role="tabpanel" aria-labelledby="{{ $tab }}-closeing-property-tab-btn">

                @if ( $loop->iteration
                <= 2)
                    <x-closeing.table :properties="$properties" :tableId="$tab .'-closeing-property-table'" />

                @endif
            </div>
            @endforeach
        </div>
    </x-row-card>
</x-content-body>

@endsection


{{-- custom js --}}
@push('js')
<script>
    $(document).ready(function() {
        // Common configuration object
        var commonConfig = {
            searching: true,
            paging: true,
            select: true,
            info: false,
            lengthChange: true,
            language: {
                paginate: {
                    next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
                    previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>'
                }
            }
        };

        // Initialize DataTables
        $('#residential-closeing-property-table').DataTable(commonConfig);
        $('#commercial-closeing-property-table').DataTable(commonConfig);
    });
</script>

<script>
    $(document).on('click', '.deleteButton', function(event) {

        event.preventDefault();

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

        // Show the SweetAlert2 confirmation dialog
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            // If user confirms deletion
            if (result.isConfirmed) {
                // Send an AJAX request to delete the user

                $.ajax({
                    url: url,
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {


                        if (response.success) {
                            Swal.fire({
                                title: 'Deleted!',
                                text: 'Closing Property has been deleted.',
                                icon: 'success',
                                showConfirmButton: true,
                                customClass: {
                                    confirmButton: 'btn btn-primary' // Set your desired CSS class here
                                }
                            }).then(() => {
                                window.location.reload();
                            });
                        } else {
                            Swal.fire({
                                title: 'Error! Unable to delete Pending Property!',
                                text: 'Unable to delete Pending Property.',
                                text: response.message,
                                icon: 'error',
                                showConfirmButton: true,
                                customClass: {
                                    confirmButton: 'btn btn-primary' // Set your desired CSS class here
                                }
                            });
                        }

                    },
                    error: function(xhr, status, error) {
                        console.log(error);
                    }
                });
            }
        });
    });
</script>
@endpush