@extends('admin.layouts.app')

@section('title','Service Bookings')

@section('content')

@php $hasFullAccess = auth('admin')->check() || (auth('staff')->check() && strcasecmp(auth('staff')->user()->designation?->name ?? '', 'Super Admin') === 0); @endphp

<style>
    .booking-actions {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .booking-actions .btn-sm {
        margin-right: 0;
    }

    .booking-action-assign {
        background: #dcfce7;
        color: #15803d;
    }
</style>

<div class="page-header">
    <div>
        <h2>Service Bookings</h2>
        <p>Manage scheduled pest control services</p>
    </div>

    @if($hasFullAccess)<a href="{{ route('admin.service-bookings.create') }}" class="btn-primary">
        <i class="fas fa-plus"></i> Add Booking
    </a>@endif
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
@endif

<div class="table-card">
    <table class="admin-table data-table">
        <thead>
            <tr>
                <th>S.No</th>
                <th>Booking No</th>
                <th>Quotation</th>
                <th>Customer</th>
                <th>Service Date</th>
                <th>Service Time</th>
                <th>Technician</th>
                <th>Status</th>
                <th width="{{ $hasFullAccess ? '190' : '70' }}" class="no-sort">Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($bookings as $key => $booking)
                <tr>
                    <td>{{ $key + 1 }}</td>
                    <td>{{ $booking->booking_no }}</td>
                    <td>{{ $booking->quotation->quotation_number ?? '-' }}</td>
                    <td>{{ $booking->customer->customer_name ?? '-' }}</td>
                    <td>{{ $booking->service_date ? \Carbon\Carbon::parse($booking->service_date)->format('d-m-Y') : '-' }}</td>
                    <td>{{ $booking->service_time ? \Carbon\Carbon::parse($booking->service_time)->format('h:i A') : '-' }}</td>
                    <td>{{ $booking->latestAssignment->technician->technician_name ?? '-' }}</td>
                    <td>
                        <span class="badge badge-success">{{ $booking->service_status }}</span>
                    </td>
                    <td>
                        <div class="booking-actions">
                            <a href="{{ route('admin.service-bookings.show', $booking->id) }}" class="btn-sm btn-timeline" title="View">
                                <i class="fas fa-eye"></i>
                            </a>

                            @if($hasFullAccess && !$booking->latestAssignment)
                                <button type="button"
                                        class="btn-sm booking-action-assign js-open-assign"
                                        title="Assign Technician"
                                        data-action="{{ route('admin.service-bookings.assign-technician', $booking->id) }}"
                                        data-booking="{{ $booking->booking_no }}">
                                    <i class="fas fa-user-check"></i>
                                </button>
                            @endif

                            @if($hasFullAccess)<a href="{{ route('admin.service-bookings.edit', $booking->id) }}" class="btn-sm btn-edit" title="Edit">
                                <i class="fas fa-edit"></i>
                            </a>

                            <form action="{{ route('admin.service-bookings.destroy', $booking->id) }}"
                                  method="POST"
                                  class="d-inline"
                                  onsubmit="return confirm('Delete this service booking?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-sm btn-delete" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>@endif
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="lead-modal" id="assignTechnicianModal" aria-hidden="true">
    <div class="lead-modal-backdrop js-close-assign"></div>
    <div class="lead-modal-dialog">
        <form method="POST" class="lead-modal-content" id="assignTechnicianForm">
            @csrf
            <input type="hidden" name="assigned_date" value="{{ date('Y-m-d') }}">
            <input type="hidden" name="work_status" value="Assigned">

            <div class="lead-modal-header">
                <div>
                    <h3>Assign Technician</h3>
                    <p id="assignBookingNo">Booking</p>
                </div>
                <button type="button" class="modal-close js-close-assign" title="Close">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="lead-modal-body">
                <div class="form-group">
                    <label>Technician *</label>
                    <select name="technician_id" required>
                        <option value="">Select Technician</option>
                        @foreach($technicians as $technician)
                            <option value="{{ $technician->id }}">
                                {{ $technician->technician_name }} - {{ $technician->mobile }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label>Instructions</label>
                    <textarea name="instructions" rows="3"></textarea>
                </div>
            </div>

            <div class="lead-modal-footer">
                <button type="button" class="btn-secondary js-close-assign">Cancel</button>
                <button type="submit" class="btn-primary">Assign</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const assignModal = document.getElementById('assignTechnicianModal');
    const assignForm = document.getElementById('assignTechnicianForm');
    const assignBookingNo = document.getElementById('assignBookingNo');

    function openAssignModal(button) {
        assignForm.action = button.dataset.action;
        assignBookingNo.textContent = button.dataset.booking || 'Booking';
        assignModal.classList.add('show');
        assignModal.setAttribute('aria-hidden', 'false');
        document.body.classList.add('modal-open');
    }

    function closeAssignModal() {
        assignModal.classList.remove('show');
        assignModal.setAttribute('aria-hidden', 'true');
        document.body.classList.remove('modal-open');
        assignForm.reset();
    }

    document.querySelectorAll('.js-open-assign').forEach(function (button) {
        button.addEventListener('click', function () {
            openAssignModal(button);
        });
    });

    document.querySelectorAll('.js-close-assign').forEach(function (button) {
        button.addEventListener('click', closeAssignModal);
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && assignModal.classList.contains('show')) {
            closeAssignModal();
        }
    });
});
</script>

@endsection