@extends('layouts.main')

@section('title')
    {{ __('Property') }}
@endsection
@section('page-main-title')
    {{ __('Property') }} 
@endsection

@section('content')
    <style>
        .no-caret::after {
            display: none !important;
        }
        .dropdown-item:hover {
            background-color: #f8f9fa;
        }
        .swipe-container {
            user-select: none;
            -webkit-user-select: none;
        }
        #swipe-handle {
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
    </style>
    <section class="section">
        <div class="card">
            <div class="card-body">
                <div class="row" id="toolbar">
                    <div class="col-12 d-flex justify-content-between align-items-center">
                        <div>
                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#filterModal">
                                <i class="bi bi-funnel"></i> {{ __('Filters') }}
                            </button>
                            <button type="button" class="btn btn-outline-secondary ms-2" id="clearFilters">
                                <i class="bi bi-x-circle"></i> {{ __('Clear Filters') }}
                            </button>
                            @if (has_permissions('create', 'property'))
                                <div class="ms-3 d-inline-block">
                                    {!! Form::open(['route' => 'property.create', 'class' => 'd-inline']) !!}
                                    {{ method_field('get') }}
                                    {{ Form::submit(__('Add Property'), ['class' => 'btn btn-primary']) }}
                                    {!! Form::close() !!}
                                </div>
                            @endif
                        </div>
                        <div class="filter-summary" id="filterSummary" style="display: none;">
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i> {{ __('Active Filters') }}: <span id="activeFiltersCount">0</span>
                            </small>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12">
                        <table class="table table-striped"
                            id="table_list" data-toggle="table" data-url="{{ url('getPropertyAdminList') }}"
                            data-click-to-select="true" data-side-pagination="server" data-pagination="true"
                            data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-search-align="right"
                            data-toolbar="#toolbar" data-show-columns="true" data-show-refresh="true"
                            data-trim-on-search="false" data-responsive="true" data-sort-name="id" data-sort-order="desc"
                            data-pagination-successively-size="3" data-query-params="queryParams">
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col" data-field="row_number" data-align="center" data-sortable="true"> {{ __('ID') }}</th>
                                    <th scope="col" data-field="title" data-sortable="false" class="max-width-row">{{ __('Title') }}</th>
                                    <th scope="col" data-field="category.category" data-align="center" data-sortable="true"> {{ __('Category') }}</th>
                                    <th scope="col" data-field="slug_id" data-visible="false" data-sortable="true" data-align="center">{{ __('Slug') }}</th>
                                    <th scope="col" data-field="city" data-align="center" data-sortable="false">{{ __('City') }}</th>
                                    <th scope="col" data-field="added_by" data-align="center" data-sortable="false"> {{ __('Customer') }}</th>
                                    <th scope="col" data-field="mobile" data-align="center" data-sortable="false"> {{ __('Mobile') }} </th>
                                    <th scope="col" data-field="propery_type" data-formatter="propertyTypeFormatter" data-align="center" data-sortable="true"> {{ __('Type') }}</th>
                                    <th scope="col" data-field="edit_status" data-sortable="false" data-align="center" data-width="5%" data-formatter="enableDisableSwitchFormatter"> {{ __('Enable/ Disable') }}</th>
                                    <th scope="col" data-field="status" data-align="center" data-sortable="false" data-formatter="statusFormatter"> {{ __('Status') }}</th>
                                    <th scope="col" data-field="interested_users" data-align="center" data-sortable="false" data-events="actionEvents"> {{ __('Interested Users') }}</th>
                                    <th scope="col" data-field="request_status" data-sortable="false" data-align="center" data-width="5%" data-formatter="requestStatusFormatter"> {{ __('Status') }}</th>
                                    @if (has_permissions('update', 'property'))
                                        <th scope="col" data-width="115" data-field="operate" data-align="center" data-sortable="false" data-events="actionEvents"> {{ __('Action') }}</th>
                                    @endif
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>

            </div>
        </div>

        {{-- Filter Modal --}}
            <div id="filterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="filterModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="filterModalLabel">
                                <i class="bi bi-funnel"></i> {{ __('Property Filters') }}
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                {{-- Filter Category --}}
                                <div class="col-md-6 mb-3">
                                    <label for="filter_category" class="form-label">{{ __('Category') }}</label>
                                    <select class="form-select" id="filter_category">
                                        <option value="">{{ __('Select Category') }}</option>
                                        @if (isset($category))
                                            @foreach ($category as $row)
                                                <option value="{{ $row->id }}">{{ $row->category }} </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                {{-- Filter Status --}}
                                <div class="col-md-6 mb-3">
                                    <label for="status" class="form-label">Availability Status</label>
                                    <select id="status" class="form-select">
                                        <option value="">Select Availability Status</option>
                                        <option value="0">{{ __('Inactive') }}</option>
                                        <option value="1">{{ __('Active') }}</option>
                                        <option value="2">{{ __('Deleted') }}</option>
                                    </select>
                                </div>

                                {{-- Filter Type --}}
                                <div class="col-md-6 mb-3">
                                    <label for="property-type-filter" class="form-label">{{ __('Property Type') }}</label>
                                    <select id="property-type-filter" class="form-select">
                                        <option value="">{{ __('Select Type') }} </option>
                                        <option value="0">{{ __('Sale') }}</option>
                                        <option value="1">{{ __('Rent') }}</option>
                                        <option value="2">{{ __('Sold') }}</option>
                                        <option value="3">{{ __('Rented') }}</option>
                                    </select>
                                </div>

                                {{-- Filter Owner --}}
                                <div class="col-md-6 mb-3">
                                    <label for="property-owner-filter" class="form-label">{{ __('Property Owner') }}</label>
                                    <select id="property-owner-filter" class="form-select">
                                        <option value="">{{ __('Select Property Owner') }} </option>
                                        <option value="0">{{ __('By Admin') }}</option>
                                        <option value="1">{{ __('By Users') }}</option>
                                    </select>
                                </div>

                                {{-- Filter Private/General --}}
                                <div class="col-md-6 mb-3">
                                    <label for="property-accessibility-filter" class="form-label">{{ __('Accessibility Type') }}</label>
                                    <select id="property-accessibility-filter" class="form-select">
                                        <option value="">{{ __('Select Accessibility Type') }} </option>
                                        <option value="0">{{ __('All') }}</option>
                                        <option value="1">{{ __('Private') }}</option>
                                        <option value="2">{{ __('General') }}</option>
                                    </select>
                                </div>

                                {{-- Filter Property Status --}}
                                <div class="col-md-6 mb-3">
                                    <label for="property-status-filter" class="form-label">Verification Status</label>
                                    <select id="property-status-filter" class="form-select">
                                        <option value="">Select Verification Status</option>
                                        <option value="Pending">Pending</option>
                                        <option value="approved">Approved</option>
                                        <option value="rejected">Rejected</option>
                                    </select>
                                </div>
                                
                                {{-- Filter is feature property --}}
                                <div class="col-md-6 mb-3">
                                    <label for="property-feature-filter" class="form-label">Feature property</label>
                                    <select id="property-feature-filter" class="form-select">
                                        <option value="">Select Feature Property</option>
                                        <option value="1">Yes</option>
                                        <option value="0">No</option>
                                    </select>
                                </div>

                                {{-- Filter Plan --}}
                                <div class="col-md-6 mb-3">
                                    <label for="filter_plan" class="form-label">{{ __('Owner Subscribed Plan') }}</label>
                                    <select class="form-select" id="filter_plan">
                                        <option value="">{{ __('Select Plan') }}</option>
                                        @if (isset($packages))
                                            @foreach ($packages as $row)
                                                <option value="{{ $row->id }}">{{ $row->name }} </option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <button type="button" class="btn btn-outline-secondary" id="clearFiltersModal">{{ __('Clear All') }}</button>
                            <button type="button" class="btn btn-primary" id="applyFilters">{{ __('Apply Filters') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        {{-- End Filter Modal --}}
        {{-- Interested Users Modal --}}
        <div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"
            aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="myModalLabel1">{{ __('Interested Users') }}</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <table class="table table-striped" id="customer_table_list" data-toggle="table" data-url="{{ url('customerList') }}" data-click-to-select="true" data-side-pagination="server" data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-show-columns="true" data-show-refresh="true" data-trim-on-search="false" data-responsive="true" data-sort-name="id" data-sort-order="desc" data-pagination-successively-size="3" data-query-params="customerqueryParams" data-show-export="true" data-export-options='{ "fileName": "data-list- 17-04-26" }'>
                            <thead class="thead-dark">
                                <tr>
                                    <th scope="col" data-field="id" data-sortable="true" data-align="center"> {{ __('ID') }}</th>
                                    <th scope="col" data-field="profile" data-sortable="false" data-align="center" data-formatter="imageFormatter"> {{ __('Profile') }}</th>
                                    <th scope="col" data-field="name" data-sortable="true" data-align="center"> {{ __('Name') }}</th>
                                    <th scope="col" data-field="mobile" data-sortable="true" data-align="center"> {{ __('Number') }}</th>
                                    <th scope="col" data-field="email" data-sortable="false" data-align="center"> {{ __('Email') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {{-- End Interested Users Modal --}}


        {{-- Gallery Images Modal --}}
        <div id="galleryImagesModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="galleryImagesModalContent" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="galleryImagesModalContent">{{ __('Gallery Images') }}</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body gallary-images-div row">
                    </div>
                </div>

            </div>

        </div>
        {{-- End Gallery Images Modal --}}

        {{-- Gallery Images Modal --}}
        <div id="documentsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="documentsModalContent" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="documentsModalContent">{{ __('Documents') }}</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body documents-div row">
                    </div>
                </div>

            </div>

        </div>

        {{-- Change Request Status Modal --}}
        <div id="changeRequestStatusModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="changeRequestStatusModalContent" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="changeRequestStatusModalContent">{{ __('Change Status') }}</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <form class="create-form" action="{{ route('update-property-request-status') }}" data-success-function="editFormSuccessFunction" method="POST">
                        <div class="modal-body">
                            {{ csrf_field() }}

                            {!! Form::hidden('id', "", ['id' => 'edit-request-status-id']) !!}
                            <div class="col-md-12 col-12  form-group  mandatory">
                                <div class="row">
                                    {{ Form::label('', __('Status'), ['class' => 'form-label col-12 ']) }}

                                    {{-- Approve --}}
                                    <div class="col-md-3">
                                        {{ Form::radio('request_status', 'approved', null, [ 'class' => 'form-check-input request-status', 'id' => 'status-approve', 'required' => true ]) }}
                                        {{ Form::label('status-approve', __('Approve'), ['class' => 'form-check-label']) }}
                                    </div>

                                    {{-- Reject --}}
                                    <div class="col-md-3">
                                        {{ Form::radio('request_status', 'rejected', null, [ 'class' => 'form-check-input request-status', 'id' => 'status-reject', 'required' => true, ]) }}
                                        {{ Form::label('status-reject', __('Reject'), ['class' => 'form-check-label']) }}
                                    </div>

                                    {{-- Reason for Reject --}}
                                    <div class="col-12 mt-1 reject-reason-text-div form-group  mandatory" style="display: none">
                                        {{ Form::label('reject-reason-text', __('Reject Reason'), ['class' => 'form-label']) }}
                                        {!! Form::textarea('reject_reason', null, ["id" => "reject-reason-text", "class" => 'form-control', "placeholder" => trans('Reject Reason')]) !!}
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">{{ __('Close') }}</button>
                            <button type="submit" class="btn btn-primary waves-effect waves-light" id="btn_submit">{{ __('Update') }}</button>
                        </div>
                    </form>
                </div>

            </div>

        </div>
        {{-- End Change Request Status --}}

        {{-- Rejection Reason Modal --}}
        <div id="rejectionReasonModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="rejectionReasonModalContent" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title" id="rejectionReasonModalContent">{{ __('Rejection Reason') }}</h6>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div id="rejection-reason-content">
                            <!-- Rejection reason content will be loaded here -->
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">{{ __('Close') }}</button>
                    </div>
                </div>
            </div>
        </div>
        {{-- End Rejection Reason Modal --}}
        
        {{-- Change Type Status Modal --}}
        <div id="changeTypeStatusModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 15px;">
                    <div class="modal-header border-0 mt-2">
                        <h5 class="modal-title fw-bold" style="font-size: 1.5rem;">{{ __('Change Property Status') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form class="create-form" action="{{ route('update-property-type-status') }}" data-success-function="editFormSuccessFunction" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="change-type-status-id">
                        <input type="hidden" name="propery_type" id="new_property_type">
                        
                        <div class="modal-body text-center py-4">
                            <div class="d-flex align-items-center justify-content-center gap-4 mb-4">
                                <div id="current-type-display" class="p-3 px-4 bg-primary text-white rounded-3 shadow-sm" style="min-width: 100px;">
                                    <span id="current-type-label">Current</span>
                                </div>
                                <div class="fs-2 text-primary fw-bold" style="color: #1e429f !important;">»</div>
                                <div id="target-type-display" class="p-3 px-4 bg-primary text-white rounded-3 shadow-sm" style="min-width: 100px;">
                                    <span id="target-type-label">Target</span>
                                </div>
                            </div>
                            <p class="text-muted">{{ __('Would you like to change the listing status?') }}</p>
                        </div>
                        <div class="modal-footer border-0 pb-4 justify-content-center">
                            <button type="button" class="btn btn-outline-secondary px-5 py-2" data-bs-dismiss="modal" style="border-radius: 8px;">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary px-5 py-2" style="border-radius: 8px; background-color: #1e429f;">{{ __('Change') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Mark Payment Received Modal --}}
        <div id="markPaymentReceivedModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 15px;">
                    <div class="modal-header border-0 mt-2">
                        <h5 class="modal-title fw-bold" style="font-size: 1.5rem;">{{ __('Payment Confirmation') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form class="create-form" action="{{ route('update-payment-status') }}" data-success-function="editFormSuccessFunction" method="POST">
                        @csrf
                        <input type="hidden" name="id" id="payment-received-id">
                        <input type="hidden" name="payment_received" value="1">
                        
                        <div class="modal-body text-center py-4">
                            <div class="mb-4">
                                <i class="bi bi-cash-coin text-success" style="font-size: 4rem;"></i>
                            </div>
                            <h4 class="mb-2">{{ __('Mark Payment as Received?') }}</h4>
                            <p class="text-muted px-4">{{ __('By marking this as received, you confirm that the commission/payment for this property has been successfully collected.') }}</p>
                            
                            {{-- Swipe Button Style --}}
                            <div class="mt-4 swipe-container mx-auto" style="width: 280px; height: 60px; background: #f0f0f0; border-radius: 30px; position: relative; overflow: hidden; border: 1px solid #ddd;">
                                <div class="swipe-bg" style="position: absolute; left: 0; top: 0; height: 100%; background: #198754; width: 0%; transition: width 0.1s;"></div>
                                <div class="swipe-text text-uppercase" style="position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #888; font-weight: 800; font-size: 0.8rem; pointer-events: none; z-index: 1;">
                                    {{ __('Swipe to Confirm') }}
                                </div>
                                <div id="swipe-handle" style="width: 50px; height: 50px; background: #1e429f; border-radius: 25px; position: absolute; left: 5px; top: 4px; display: flex; align-items: center; justify-content: center; color: white; cursor: grab; z-index: 2; transition: left 0.1s;">
                                    <i class="bi bi-chevron-double-right"></i>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer border-0 pb-4 justify-content-center">
                            <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" id="mark-payment-submit" class="btn btn-primary d-none">{{ __('Confirm') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <input type="hidden" id="property_id">

    </section>

@endsection

@section('script')
    <script>
        // Filter functionality
        function updateFilterSummary() {
            let activeFilters = 0;
            const filters = [
                { id: 'status', name: 'Status' },
                { id: 'filter_category', name: 'Category' },
                { id: 'property-type-filter', name: 'Type' },
                { id: 'property-owner-filter', name: 'Owner' },
                { id: 'property-accessibility-filter', name: 'Accessibility' },
                { id: 'property-status-filter', name: 'Request Status' },
                { id: 'property-feature-filter', name: 'Feature Property' },
                { id: 'filter_plan', name: 'Plan' }
            ];

            filters.forEach(filter => {
                if ($('#' + filter.id).val() !== '') {
                    activeFilters++;
                }
            });

            if (activeFilters > 0) {
                $('#activeFiltersCount').text(activeFilters);
                $('#filterSummary').show();
            } else {
                $('#filterSummary').hide();
            }
        }

        function clearAllFilters() {
            $('#status').val('');
            $('#filter_category').val('');
            $('#property-type-filter').val('');
            $('#property-owner-filter').val('');
            $('#property-accessibility-filter').val('');
            $('#property-status-filter').val('');
            $('#property-feature-filter').val('');
            $('#filter_plan').val('');
            updateFilterSummary();
            $('#table_list').bootstrapTable('refresh');
        }

        // Apply filters button
        $('#applyFilters').on('click', function() {
            updateFilterSummary();
            $('#table_list').bootstrapTable('refresh');
            $('#filterModal').modal('hide');
        });

        // Clear filters buttons
        $('#clearFilters, #clearFiltersModal').on('click', function() {
            clearAllFilters();
            if ($(this).attr('id') === 'clearFiltersModal') {
                $('#filterModal').modal('hide');
            }
        });

        // Individual filter change events
        $('#status, #filter_category, #property-type-filter, #property-owner-filter, #property-accessibility-filter, #property-status-filter, #property-feature-filter, #filter_plan').on('change', function() {
            updateFilterSummary();
        });

        // Initialize filter summary on page load

        $(document).ready(function() {
            updateFilterSummary();

            var params = new window.URLSearchParams(window.location.search);
            if (params.get('status') != 'null') {
                $('#status').val(params.get('status')).trigger('change');
            }
            if (params.get('type') != 'null') {
                $('#type').val(params.get('type'));
            }
        });


        function queryParams(p) {

            return {
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                limit: p.limit,
                search: p.search,
                status: $('#status').val(),
                category: $('#filter_category').val(),
                property_type: $('#property-type-filter').val(),
                property_added_by: $('#property-owner-filter').val(),
                property_accessibility: $('#property-accessibility-filter').val(),
                property_status: $('#property-status-filter').val(),
                customerID: "{{ $customerID }}",
                is_feature: $('#property-feature-filter').val(),
                plan_id: $('#filter_plan').val()
            };
        }

        window.actionEvents = {
            'click .edit_btn': function(e, value, row, index) {
                $('#property_id').val(row.id);
                $('#customer_table_list').bootstrapTable('refresh');
            },
            'click .gallery-image-btn': function(e, value, row, index) {
                $('.gallary-images-div').empty();
                if(row.gallery.length){
                    $.each(row.gallery, function(key, value) {
                        $('.gallary-images-div').append(
                            `<div class="col-sm-12 col-md-3 col-lg-2 mt-1 ml-1">
                                <a href="${value.image_url}" target="_blank">
                                    <img src="${value.image_url}"height="100" width="100" class="rounded"/>
                                </a>
                            </div>`
                        );
                    });
                }else{
                    $('.gallary-images-div').append(
                        `<span class="no-data-found-span">
                            ${window.trans["No Data Found"]}
                        </span>`
                    );
                }
            },
            'click .documents-btn': function(e, value, row, index) {
                $('.documents-div').empty();
                if(row.documents.length){
                    $.each(row.documents, function(key, value) {
                        var url = value.file; // Your URL
                        var filename = value.file_name;
                        var documentSvgImage = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="30" width="30" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M208 64h66.75a32 32 0 0122.62 9.37l141.26 141.26a32 32 0 019.37 22.62V432a48 48 0 01-48 48H192a48 48 0 01-48-48V304"></path><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M288 72v120a32 32 0 0032 32h120"></path><path fill="none" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M160 80v152a23.69 23.69 0 01-24 24c-12 0-24-9.1-24-24V88c0-30.59 16.57-56 48-56s48 24.8 48 55.38v138.75c0 43-27.82 77.87-72 77.87s-72-34.86-72-77.87V144"></path></svg>`;
                        var downloadImg = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m12 16 4-5h-3V4h-2v7H8z"></path><path d="M20 18H4v-7H2v7c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2v-7h-2v7z"></path></svg>`;
                        var downloadText = "{{ __('Download') }}";

                        $('.documents-div').append(
                            `<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 col-xxl-3 mt-2 bg-light rounded m-2 p-2">
                                <div class="docs_main_div">
                                    <div class="doc_icon">
                                        ${documentSvgImage}
                                    </div>
                                    <div class="doc_title">
                                        <span title="${filename}">${filename}</span>
                                    </div>
                                    <div class="doc_download_button">
                                        <a href="${url}" target="_blank">
                                            <span>
                                                ${downloadImg}
                                            </span>
                                            <span>${downloadText}</span>
                                        </a>
                                    </div>
                                </div>
                            </div>`
                        );
                    });
                }else{
                    $('.documents-div').append(
                        `<span class="no-data-found-span">
                            ${window.trans["No Data Found"]}
                        </span>`
                    );
                }
            },
            'click .request-status-btn': function(e, value, row, index) {
                $("#edit-request-status-id").val(row.id);
                $('input[name=request_status][value="' + row.request_status + '"]').prop('checked', true);
                if (row.request_status == 'rejected') {
                    $(".reject-reason-text-div").show();
                    $("#reject-reason-text").attr("required", true);
                } else {
                    $(".reject-reason-text-div").hide();
                    $("#reject-reason-text").removeAttr("required");
                }
            },
            'click .change-type-status-btn': function(e, value, row, index) {
                $("#change-type-status-id").val(row.id);
                let rawType = row.property_type_raw;
                
                // Get human readable labels
                let typeLabels = {
                    0: "{{ __('Sell') }}",
                    1: "{{ __('Rent') }}",
                    2: "{{ __('Sold') }}",
                    3: "{{ __('Rented') }}"
                };
                
                let targetTypes = {
                    0: { value: 2, label: "{{ __('Sold') }}" },
                    1: { value: 3, label: "{{ __('Rented') }}" },
                    2: { value: 0, label: "{{ __('Sell') }}" },
                    3: { value: 1, label: "{{ __('Rent') }}" }
                };

                let currentLabel = typeLabels[rawType] || "Unknown";
                let target = targetTypes[rawType] || { value: rawType, label: "Same" };

                $("#current-type-label").text(currentLabel);
                $("#target-type-label").text(target.label);
                $("#new_property_type").val(target.value);
            },
            'click .mark-payment-received-btn': function(e, value, row, index) {
                $("#payment-received-id").val(row.id);
            }
        }

        function customerqueryParams(p) {

            return {
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                limit: p.limit,
                search: p.search,
                property_id: $('#property_id').val(),
            };
        }
        function editFormSuccessFunction () {
            $('#table_list').bootstrapTable('refresh');
            setTimeout(function () {
                $('#changeRequestStatusModal').modal('hide');
                $('#changeTypeStatusModal').modal('hide');
                $('#markPaymentReceivedModal').modal('hide');
            }, 1000);
        }

        $(document).on('shown.bs.modal', '#markPaymentReceivedModal', function () {
            const container = document.querySelector('.swipe-container');
            const handle = document.getElementById('swipe-handle');
            const bg = document.querySelector('.swipe-bg');
            const submitBtn = document.getElementById('mark-payment-submit');
            const maxSwipe = container.offsetWidth - handle.offsetWidth - 10;
            let isDragging = false;
            let startX = 0;

            if (handle) {
                handle.style.left = '5px';
                bg.style.width = '0%';

                handle.addEventListener('mousedown', startDrag);
                handle.addEventListener('touchstart', startDrag);

                window.addEventListener('mousemove', drag);
                window.addEventListener('touchmove', drag);

                window.addEventListener('mouseup', endDrag);
                window.addEventListener('touchend', endDrag);

                function startDrag(e) {
                    isDragging = true;
                    startX = (e.type === 'mousedown') ? e.pageX : e.touches[0].pageX;
                    handle.style.cursor = 'grabbing';
                }

                function drag(e) {
                    if (!isDragging) return;
                    const x = (e.type === 'mousemove') ? e.pageX : e.touches[0].pageX;
                    let walk = x - startX;
                    if (walk < 0) walk = 0;
                    if (walk > maxSwipe) walk = maxSwipe;

                    handle.style.left = (walk + 5) + 'px';
                    bg.style.width = (walk / maxSwipe * 100) + '%';
                }

                function endDrag() {
                    if (!isDragging) return;
                    isDragging = false;
                    handle.style.cursor = 'grab';

                    const currentLeft = parseInt(handle.style.left);
                    if (currentLeft >= maxSwipe) {
                        handle.style.left = (maxSwipe + 5) + 'px';
                        bg.style.width = '100%';
                        // Trigger form submission
                        $(submitBtn).closest('form').submit();
                    } else {
                        handle.style.left = '5px';
                        bg.style.width = '0%';
                    }
                }
            }
        });

        // Listen for table refresh and update modal if needed
        $(document).ready(function() {
            $('#table_list').on('load-success.bs.table', function() {
                if (window._refreshRejectionReasonForPropertyId) {
                    viewRejectionReason(window._refreshRejectionReasonForPropertyId);
                    window._refreshRejectionReasonForPropertyId = null;
                }
            });
        });

        // Function to view rejection reason
        function viewRejectionReason(propertyId) {
            // Get the current table data to find the property row
            var tableData = $('#table_list').bootstrapTable('getData');
            var propertyRow = null;

            // Find the property row by ID
            for (var i = 0; i < tableData.length; i++) {
                if (tableData[i].id == propertyId) {
                    propertyRow = tableData[i];
                    break;
                }
            }

            if (propertyRow && propertyRow.reject_reason && propertyRow.reject_reason.length > 0) {
                var content = '<div class="row"><div class="col-12">';

                // Loop through all rejection reasons
                propertyRow.reject_reason.forEach(function(rejection, index) {
                    var rejectionDate = new Date(rejection.created_at).toLocaleDateString();
                    var rejectionTime = new Date(rejection.created_at).toLocaleTimeString();

                    content += `
                        <div class="card mb-3 main-br-cls">
                            <div class="card-header  text-white d-flex justify-content-between align-items-center ">
                                <h6 class="mb-3">
                                    <i class="bi bi-calendar-event me-2"></i>
                                    <strong>Rejection #${index + 1}</strong> - ${rejectionDate} at ${rejectionTime}
                                </h6>
                                <button type="button" class="btn btn-sm btn-outline-dark" onclick="deleteRejectionReason(${rejection.id}, ${propertyId})" title="Delete Rejection Reason">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                            <div class="card-body">
                                <p class="mb-0  cls-reason">Reason:  <span class="mt-2 mb-0 fw-normal">${rejection.reason}</span></p>

                            </div>
                        </div>
                    `;
                });

                content += '</div></div>';

                $('#rejection-reason-content').html(content);
                $('#rejectionReasonModal').modal('show');
            } else {
                // Show error message if no rejection reason found
                $('#rejection-reason-content').html(`
                    <div class="alert alert-warning">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        No rejection reason found for this property.
                    </div>
                `);
                $('#rejectionReasonModal').modal('show');
            }
        }

        // Function to delete rejection reason
        function deleteRejectionReason(rejectionId, propertyId) {
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to delete this rejection reason?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '{{ route("delete-rejection-reason") }}',
                        type: 'POST',
                        data: {
                            rejection_id: rejectionId,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.error === false) {
                                showSuccessToast('Rejection reason deleted successfully');
                                // Set global variable to refresh modal after table refresh
                                window._refreshRejectionReasonForPropertyId = propertyId;
                                // Refresh the table to get updated data
                                $('#table_list').bootstrapTable('refresh');
                            } else {
                                showWarningToast('Error: ' + response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            showWarningToast('Error deleting rejection reason: ' + error);
                        }
                    });
                }
            });
        }
    </script>
@endsection