@extends('backend.app')
@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Property Type List</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Property Types</li>
        </ol>
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-end gap-2 mb-3">
                    <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    <a href="{{ route('admin.property_type.create') }}" class="btn btn-primary">Add Property Type</a>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Property</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="type-edit-modal">
</div>

@endsection

@push('scripts')
    <script>
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            }
        });

        const table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
             language: {
                processing: `<div class="text-center">
                    <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>`
            },
            pagingType: "full_numbers",
            dom: "<'row justify-content-between table-topbar'<'col-md-2 col-sm-4 px-0'l><'col-md-2 col-sm-4 px-0'f>>tipr",                
            ajax: "{{ route('admin.property_type.index') }}",
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'name', name: 'name' },
                { data: 'status', name: 'status' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ]
        });
    });

    
    // Status change popup handler
    const statusOptions = [
        { value: 'inactive',       label: 'Inactive',       color: '#6c757d', icon: '📝' },
        { value: 'active',         label: 'Active',         color: '#4CAF50', icon: '✅' },
    ];

    $('#type-edit-modal').on('hidden.bs.modal', function () {
        $(this).html('');
    });

    $(document).on('click', '.property-status-badge', function () {
        let badge = $(this);
        let propertyId = badge.data('id');
        let currentStatus = badge.data('status');

        let buttonsHtml = '<div style="display:flex;flex-direction:column;gap:10px;margin-top:8px;">';
        statusOptions.forEach(function (opt) {
            let isActive = opt.value === currentStatus;
            let outline = isActive ? 'outline:3px solid ' + opt.color + ';outline-offset:2px;' : '';
            let opacity = isActive ? 'opacity:0.7;' : '';
            buttonsHtml += '<button type="button" class="swal-status-btn" data-value="' + opt.value + '" ' +
                'style="background:' + opt.color + ';color:#fff;border:none;padding:12px 20px;border-radius:8px;' +
                'font-size:15px;font-weight:600;cursor:pointer;transition:all 0.2s;' + outline + opacity +
                'display:flex;align-items:center;justify-content:center;gap:8px;">' +
                '<span style="font-size:18px;">' + opt.icon + '</span> ' + opt.label +
                (isActive ? ' <span style="font-size:12px;opacity:0.8;">(current)</span>' : '') +
                '</button>';
        });
        buttonsHtml += '</div>';

        Swal.fire({
            title: 'Change Property Status',
            html: buttonsHtml,
            showConfirmButton: false,
            showCancelButton: true,
            cancelButtonText: 'Cancel',
            cancelButtonColor: '#6c757d',
            didOpen: function () {
                document.querySelectorAll('.swal-status-btn').forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        if (this.dataset.value !== currentStatus) {
                            this.style.transform = 'scale(1.03)';
                            this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)';
                        }
                    });
                    btn.addEventListener('mouseleave', function () {
                        this.style.transform = 'scale(1)';
                        this.style.boxShadow = 'none';
                    });
                    btn.addEventListener('click', function () {
                        let newStatus = this.dataset.value;
                        if (newStatus === currentStatus) {
                            Swal.close();
                            return;
                        }
                        updatePropertyStatus(propertyId, newStatus);
                        Swal.close();
                    });
                });
            }
        });
    });

    function updatePropertyStatus(propertyId, newStatus) {
        let statusUrl = '{{ route('admin.property_type.status', ':id') }}'.replace(':id', propertyId);

        $.ajax({
            type: 'PATCH',
            url: statusUrl,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { status: newStatus },
            success: function (resp) {
                if (resp.success) {
                    toastr.success(resp.message);
                    $('#datatable').DataTable().ajax.reload(null, false);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('Failed to update status. Please try again.');
            }
        });
    }

    $(document).on('click', '.edit-btn', function() {
        let id = $(this).data('id');
        let url = '{{ route('admin.property_type.edit', ':id') }}'.replace(':id', id);
        $.ajax({
            url: url,
            type: 'GET',
            success: function(response) {
                $('#type-edit-modal').html(response).modal('show');
            },
            error: function() {
                toastr.error('Failed to load edit form.');
            }
        });
    });

    $(document).on('submit', '#edit-property-type-form', function(e) {
        e.preventDefault();
        let id = $(this).data('id');
        let url = '{{ route('admin.property_type.update', ':id') }}'.replace(':id', id);
        let formData = $(this).serialize();

        $.ajax({
            url: url,
            type: 'PUT',
            data: formData,
            success: function(response) {
                if (response.success) {
                    $('#type-edit-modal').modal('hide');
                    $('#datatable').DataTable().ajax.reload();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function(response) {
                let errors = response.responseJSON.errors;
                for (let key in errors) {
                    toastr.error(errors[key][0]);
                }
            }
        });
    });

    function showDeleteConfirm(id) {
        event.preventDefault();

        Swal.fire({
            title: 'Are you sure you want to delete?',
            text: 'If you delete this, it will be gone forever.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!',
        }).then((result) => {
            if (result.isConfirmed) {
                deleteItem(id);
            }
        });
    }

    function deleteItem(id) {
        let url = '{{ route('admin.property_type.delete', ':id') }}';
        let csrfToken = '{{ csrf_token() }}';

        $.ajax({
            type: "DELETE",
            url: url.replace(':id', id),
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function (resp) {
                $('#datatable').DataTable().ajax.reload();
                if (resp.success) {
                    toastr.success(resp.message);
                } else {
                    toastr.error(resp.message);
                }
            },
            error: function () {
                toastr.error('An error occurred. Please try again.');
            }
        });
    }
    </script>
@endpush