@extends('layouts.main')

@section('title')
    {{ __('Scheduled Property Visits') }}
@endsection

@section('page-title')
    <div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h4>@yield('title')</h4>
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Dashboard') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('Scheduled Property Visits') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
@endsection

@section('content')
    <section class="section">
        <div class="card">
            <div class="card-body">
                <div class="row justify-content-center" id="toolbar">
                    <div class="col-md-12">
                        <select id="filter_property" class="form-select" onchange="$('#table_list').bootstrapTable('refresh');">
                            <option value="">{{ __('All Properties') }}</option>
                            @foreach (App\Models\Property::all() as $property)
                                <option value="{{ $property->id }}">{{ $property->title }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <table class="table-light" aria-describedby="mydesc" class='table-striped' id="table_list"
                            data-toggle="table" data-url="{{ route('schedule.property.visits.list') }}" 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-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>
                                <tr>
                                    <th scope="col" data-field="property_title" data-align="center" data-sortable="true">
                                        {{ __('Property') }}</th>
                                    <th scope="col" data-field="full_name" data-align="center" data-sortable="true">
                                        {{ __('Full Name') }}</th>
                                    <th scope="col" data-field="email" data-align="center" data-sortable="true">
                                        {{ __('Email') }}</th>
                                    <th scope="col" data-field="phone" data-align="center" data-sortable="true">
                                        {{ __('Phone') }}</th>
                                    <th scope="col" data-field="preferred_date" data-align="center" data-sortable="true">
                                        {{ __('Preferred Date') }}</th>
                                    <th scope="col" data-field="preferred_time" data-align="center" data-sortable="true">
                                        {{ __('Preferred Time') }}</th>
                                    <th scope="col" data-field="is_approved" data-sortable="false" data-align="center" data-width="5%" data-formatter="requestStatusFormatter"> {{ __('Is Approved') }}</th>
                                    <th scope="col" data-field="operate" data-align="center" data-sortable="false">
                                        {{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- VIEW MODAL -->
        <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="viewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="viewModalLabel">{{ __('Scheduled Visit Details') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Property:') }}</strong> <span id="view-property_title"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Full Name:') }}</strong> <span id="view-full_name"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Email:') }}</strong> <span id="view-email"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Phone:') }}</strong> <span id="view-phone"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Preferred Date:') }}</strong> <span id="view-preferred_date"></span></p></div>
                            <div class="col-md-6"><p><strong>{{ __('Preferred Time:') }}</strong> <span id="view-preferred_time"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-12"><p><strong>{{ __('Purpose of Visit:') }}</strong> <span id="view-purpose_of_visit"></span></p></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><p><strong>{{ __('Status:') }}</strong> <span id="view-is_approved"></span></p></div>
                        </div>
                        <div class="row" id="row-reject-reason" style="display:none;">
                            <div class="col-md-6"><p><strong>{{ __('Reject Reason:') }}</strong> <span id="view-reject_reason"></span></p></div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('Close') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function queryParams(p) {
            return {
                limit: p.limit,
                sort: p.sort,
                order: p.order,
                offset: p.offset,
                search: p.search,
                property_id: $('#filter_property').val()
            };
        }

        // View Modal
        $('#viewModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var id = button.data('id')
            var modal = $(this)

            $.ajax({
                url: '{{ url('get-schedule-property-visits-list') }}' + '?id=' + id,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    var visit = data.rows[0];
                    modal.find('#view-id').text(visit.id);
                    modal.find('#view-property_title').text(visit.property_title);
                    modal.find('#view-full_name').text(visit.full_name);
                    modal.find('#view-email').text(visit.email);
                    modal.find('#view-phone').text(visit.phone);
                    modal.find('#view-preferred_date').text(visit.preferred_date);
                    modal.find('#view-preferred_time').text(visit.preferred_time);
                    modal.find('#view-purpose_of_visit').text(visit.purpose_of_visit);
                    let statusText = '';
                    if (visit.is_approved == 'approved') statusText = 'Approved';
                    else if (visit.is_approved == 'rejected') statusText = 'Rejected';
                    else statusText = 'Pending';
                    modal.find('#view-is_approved').text(statusText);
                    if (visit.is_approved == 'rejected') {
                        $('#row-reject-reason').show();
                        modal.find('#view-reject_reason').text(visit.reject_reason ? visit.reject_reason : '-');
                    } else {
                        $('#row-reject-reason').hide();
                        modal.find('#view-reject_reason').text('');
                    }
                }
            });
        })

    </script>
@endsection