@extends('backend.app')

@section('title', 'Property List')

@push('style')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<style>
    .select2-container {
        width: 100% !important;
    }

    .select2-container .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
        border-radius: 0.375rem;
        padding: 0.375rem 0.75rem;
        display: flex;
        align-items: center;
        background-color: #fff;
    }

    .select2-container .select2-selection__rendered {
        padding: 0;
        line-height: 1.5;
        color: #212529;
    }

    .select2-container .select2-selection__placeholder {
        color: #6c757d;
    }

    .select2-container .select2-selection__arrow {
        height: 36px;
        right: 6px;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        margin-right: 6px;
        font-size: 16px;
    }

    .select2-container--default .select2-results__option {
        padding: 8px 12px;
        font-size: 14px;
    }

    .property-status-badge:hover {
        opacity: 0.85 !important;
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        transition: all 0.2s ease;
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Property 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">Properties</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                 <div class="mb-3 d-flex justify-content-end">
                    <a href="{{ route('admin.property.create') }}" class="btn btn-primary">Add Property</a>
                </div>
                <div class="mb-3 row g-3 align-items-end">
                    <div class="col-md-3">
                        <label class="form-label" for="filterInternalCode">Code</label>
                        <input type="text" class="form-control" id="filterInternalCode" placeholder="Search code">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterPropertyTitle">Title</label>
                        <select class="form-control js-filter-select" id="filterPropertyTitle" data-placeholder="Select title">
                            <option value=""></option>
                            @foreach ($titleOptions as $title)
                                <option value="{{ $title }}">{{ $title }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterPropertyType">Type</label>
                        <select class="form-control js-filter-select" id="filterPropertyType" data-placeholder="Select type">
                            <option value=""></option>
                            @foreach ($propertyTypes as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterAgent">Agent</label>
                        <select class="form-control js-filter-select" id="filterAgent" data-placeholder="Select agent">
                            <option value=""></option>
                            @foreach ($agents as $agent)
                                <option value="{{ $agent->id }}">{{ $agent->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterStatus">Status</label>
                        <select class="form-control js-filter-select" id="filterStatus" data-placeholder="Select status">
                            <option value=""></option>
                            <option value="draft">Draft</option>
                            <option value="pending">Pending</option>
                            <option value="available">Available</option>
                            <option value="under_contract">Under Contract</option>
                            <option value="sold">Sold</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterPriceMin">Price range</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="filterPriceMin" placeholder="Min" min="0" step="0.01">
                            <span class="input-group-text">-</span>
                            <input type="number" class="form-control" id="filterPriceMax" placeholder="Max" min="0" step="0.01">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label" for="filterDateRange">Date range</label>
                        <input type="text" class="form-control" id="filterDateRange" placeholder="YYYY-MM-DD to YYYY-MM-DD" autocomplete="off">
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="button" class="btn btn-danger" id="filterReset">Clear filters</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-bordered text-nowrap border-bottom w-100" id="datatable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Image</th>
                                <th>Title</th>
                                <th>Created At</th>
                                <th>Code</th>
                                <th>Type</th>
                                <th>Agent</th>
                                <th>Price</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

        if (!$.fn.DataTable.isDataTable('#datatable')) {
            const table = $('#datatable').DataTable({
                order: [],
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "All"]
                ],
                processing: true,
                responsive: 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: {
                    url: "{{ route('admin.property.index') }}?get-urls=yes",
                    type: "GET",
                    data: function (d) {
                        d.internal_code = $('#filterInternalCode').val();
                        d.property_title = $('#filterPropertyTitle').val();
                        d.property_type_id = $('#filterPropertyType').val();
                        d.agent_id = $('#filterAgent').val();
                        d.status = $('#filterStatus').val();
                        d.price_min = $('#filterPriceMin').val();
                        d.price_max = $('#filterPriceMax').val();
                        d.date_from = $('#filterDateRange').data('date-from') || '';
                        d.date_to = $('#filterDateRange').data('date-to') || '';
                    },
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'image', name: 'image' },
                    { data: 'title', name: 'title' },
                    { data: 'created_at', name: 'created_at', orderable: false, searchable: false },
                    { data: 'internal_code', name: 'internal_code' },
                    { data: 'property_type', name: 'property_type', orderable: false },
                    { data: 'agent', name: 'agent', orderable: false },
                    { data: 'price', name: 'price' },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                ],
            });

            const $filterSelects = $('.js-filter-select');
            $filterSelects.each(function () {
                const $el = $(this);
                $el.select2({
                    width: '100%',
                    allowClear: true,
                    placeholder: $el.data('placeholder') || 'Select'
                });
            });

            $('#filterInternalCode').on('keyup', function () {
                table.ajax.reload();
            });

            $('#filterPriceMin, #filterPriceMax').on('keyup change', function () {
                table.ajax.reload();
            });

            $filterSelects.on('change', function () {
                table.ajax.reload();
            });

            const dateRangePicker = flatpickr('#filterDateRange', {
                mode: 'range',
                dateFormat: 'Y-m-d',
                onChange: function (selectedDates, dateStr) {
                    let dateFrom = '';
                    let dateTo = '';
                    if (selectedDates.length >= 1) {
                        dateFrom = selectedDates[0].toISOString().slice(0, 10);
                    }
                    if (selectedDates.length >= 2) {
                        dateTo = selectedDates[1].toISOString().slice(0, 10);
                    }
                    $('#filterDateRange').data('date-from', dateFrom);
                    $('#filterDateRange').data('date-to', dateTo);
                    table.ajax.reload();
                }
            });

            $('#filterReset').on('click', function () {
                $('#filterInternalCode').val('');
                $('#filterPriceMin').val('');
                $('#filterPriceMax').val('');
                $filterSelects.val('').trigger('change');
                $('#filterDateRange').data('date-from', '');
                $('#filterDateRange').data('date-to', '');
                dateRangePicker.clear();
                table.ajax.reload();
            });
        }
    });

    // Status change popup handler
    const statusOptions = [
        { value: 'draft',          label: 'Draft',          color: '#6c757d', icon: '📝' },
        { value: 'pending',        label: 'Pending',        color: '#E1712B', icon: '⏳' },
        { value: 'available',      label: 'Available',      color: '#4CAF50', icon: '✅' },
        { value: 'under_contract', label: 'Under Contract', color: '#0d6efd', icon: '📋' },
        { value: 'sold',           label: 'Sold',           color: '#dc3545', icon: '🏷️' },
    ];

    $(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.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.');
            }
        });
    }

    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.destroy', ':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