@extends('layout.app')

@section('content')

    <ol class="breadcrumb bc-3">
        <li><a href="#"><i class="fa-home"></i>Home</a></li>
        <li><a href="#">Inquiries</a></li>
        <li class="active"><strong>Inquiries</strong></li>
    </ol>

    <br/>
    <h3>Inquiries</h3>
    <br/>

    {{-- Filters --}}
    <form method="GET" action="{{ route('inquiry') }}" id="filter-form">
        <div class="row" style="margin-bottom:15px;">
            <div class="col-md-3">
                <label>From Date</label>
                <input type="date" name="from" class="form-control"
                       value="{{ request('from') }}">
            </div>
            <div class="col-md-3">
                <label>To Date</label>
                <input type="date" name="to" class="form-control"
                       value="{{ request('to') }}">
            </div>
            <div class="col-md-3">
                <label>Status</label>
                <select name="status" class="form-control">
                    <option value="">-- All --</option>
                    <option value="scheduled" {{ request('status') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                    <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                </select>
            </div>
            <div class="col-md-3" style="padding-top:25px;">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('inquiry') }}" class="btn btn-default">Reset</a>
            </div>
        </div>
    </form>

    <div style="margin-bottom:10px;">
        <span class="text-muted">
            Total: <strong>{{ $inquiries->count() }}</strong> inquiries
        </span>
    </div>

    {{-- Table --}}
    <table class="table table-bordered datatable" id="inquiry-table">
        <thead>
        <tr>
            <th>Customer</th>
            <th>Property</th>
            <th>Viewing Date</th>
            <th>Rent</th>
            <th>Status</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        @forelse($inquiries as $inquiry)
            <tr>
                {{-- Customer --}}
                <td>
                    <strong style="display:block;">{{ $inquiry->customer_name ?? 'N/A' }}</strong>
                    <small class="text-muted">{{ $inquiry->customer_phone ?? '' }}</small>
                </td>

                {{-- Property --}}
                <td style="vertical-align:middle;">
                    <span>{{ $inquiry->property_address ?? 'N/A' }}</span><br/>
                    <small class="text-muted">{{ $inquiry->property_id ?? '' }}</small>
                </td>

                {{-- Viewing Date --}}
                <td>
                    @if($inquiry->preferred_date)
                        @php $dt = \Carbon\Carbon::parse($inquiry->preferred_date); @endphp
                        <span class="text-dark">
                            <i class="fa fa-calendar-o text-primary"></i>
                            {{ $dt->format('d M Y') }}
                        </span><br/>
                        <small class="text-muted">
                            <i class="fa fa-clock-o"></i>
                            {{ $dt->format('h:i A') }}
                        </small>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>

                {{-- Rent --}}
                <td style="vertical-align:middle;">
                    @if($inquiry->agreed_rent)
                        <strong>${{ number_format($inquiry->agreed_rent) }}</strong><br/>
                        <small class="text-muted">
                            ${{ number_format($inquiry->rent_min) }} –
                            ${{ number_format($inquiry->rent_max) }}/mo
                        </small>
                    @else
                        <span class="text-muted">—</span>
                    @endif
                </td>

                {{-- Status --}}
                <td style="vertical-align:middle;">
                    <span class="label
                        @if($inquiry->status == 'scheduled') label-success
                        @elseif($inquiry->status == 'cancelled') label-danger
                        @else label-warning @endif"
                          style="text-transform:capitalize; border-radius:12px; padding:2px 10px;">
                        {{ $inquiry->status }}
                    </span>
                </td>

                <td style="vertical-align: middle;">
                    <a href="{{ route('call.detail', $inquiry->call_id) }}"
                       class="btn btn-xs btn-info">
                        <i class="fa fa-eye"></i> View
                    </a>
                </td>
            </tr>
        @empty
            <tr>
                <td colspan="6" class="text-center text-muted">No inquiries found.</td>
            </tr>
        @endforelse
        </tbody>
    </table>

@endsection

@push('scripts')
    <link rel="stylesheet" href="{{asset('assets/js/datatables/datatables.css')}}">
    <script src="{{asset('assets/js/datatables/datatables.js')}}"></script>
    <script>
        jQuery(document).ready(function ($) {
            $('#inquiry-table').DataTable({
                paging: true,
                searching: true,
                ordering: true,
                order: [[2, 'desc']],
                columnDefs: [
                    {targets: '_all', defaultContent: '—'}
                ]
            });
        });
    </script>
@endpush