@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-6">
    <div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
        <h1 class="text-2xl font-bold text-gray-800 mb-6">Create Service Order</h1>

        @if (session('success'))
            <div class="bg-green-100 text-green-700 p-4 rounded mb-6">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="bg-red-100 text-red-700 p-4 rounded mb-6">
                {{ session('error') }}
            </div>
        @endif

        <form action="{{ route('service-orders.store') }}" method="POST" class="space-y-4" id="service-order-form">
            @csrf

            <!-- Customer Mobile Number -->
            <div>
                <label for="mobile_no" class="block text-sm font-medium text-gray-700">Customer Mobile No</label>
                <input type="text" name="mobile_no" id="mobile_no" value="{{ old('mobile_no') }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
                    autocomplete="off">
                <div id="customer-suggestions" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto hidden"></div>
                @error('mobile_no') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <!-- New Customer Form -->
            <div id="new-customer-form" class="hidden space-y-4 bg-gray-50 p-4 rounded-md">
                <h3 class="text-lg font-medium text-gray-800">Create New Customer</h3>
                <div>
                    <label for="new_customer_name" class="block text-sm font-medium text-gray-700">Customer Name</label>
                    <input type="text" name="new_customer_name" id="new_customer_name" value="{{ old('new_customer_name') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    @error('new_customer_name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label for="new_customer_identity_no" class="block text-sm font-medium text-gray-700">Identity Number</label>
                    <input type="text" name="new_customer_identity_no" id="new_customer_identity_no" value="{{ old('new_customer_identity_no') }}"
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    @error('new_customer_identity_no') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
            </div>

            <!-- Service Type -->
            <div>
                <label for="service_id" class="block text-sm font-medium text-gray-700">Service Type</label>
                <select name="service_id" id="service_id"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Select a service</option>
                    @foreach ($services as $service)
                        <option value="{{ $service->id }}" {{ old('service_id') == $service->id ? 'selected' : '' }}>
                            {{ $service->name }}
                        </option>
                    @endforeach
                </select>
                @error('service_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <!-- Branch -->
            @if (auth()->user()->role === 'super_admin')
            <div>
                <label for="branch_id" class="block text-sm font-medium text-gray-700">Branch</label>
                <select name="branch_id" id="branch_id"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Select a branch</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>
                            {{ $branch->name }}
                        </option>
                    @endforeach
                </select>
                @error('branch_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
            @else
                <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}">
            @endif

            <!-- Total Cost -->
            <div>
                <label for="total_cost" class="block text-sm font-medium text-gray-700">Total Cost</label>
                <input type="number" step="0.01" name="total_cost" id="total_cost" value="{{ old('total_cost') }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                @error('total_cost') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <!-- Payment -->
            <div>
                <label for="received_amount" class="block text-sm font-medium text-gray-700">Received Amount (Optional)</label>
                <input type="number" step="0.01" name="received_amount" id="received_amount" value="{{ old('received_amount') }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                @error('received_amount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="payment_method" class="block text-sm font-medium text-gray-700">Payment Method (Optional)</label>
                <select name="payment_method" id="payment_method"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <option value="">Select payment method</option>
                    <option value="cash" {{ old('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                    <option value="bank" {{ old('payment_method') == 'bank' ? 'selected' : '' }}>Bank</option>
                </select>
                @error('payment_method') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div id="trx_id_field" class="{{ old('payment_method') == 'bank' ? '' : 'hidden' }}">
                <label for="trx_id" class="block text-sm font-medium text-gray-700">Transaction ID</label>
                <input type="text" name="trx_id" id="trx_id" value="{{ old('trx_id') }}"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                @error('trx_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <!-- Submit -->
            <div class="flex gap-2">
                <button type="submit" class="w-full bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700">
                    Create Order
                </button>
                <a href="{{ route('service-orders.index') }}" class="w-full bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
document.addEventListener('DOMContentLoaded', function () {
    const paymentMethodSelect = document.getElementById('payment_method');
    const trxIdField = document.getElementById('trx_id_field');
    const serviceSelect = document.getElementById('service_id');
    const totalCostInput = document.getElementById('total_cost');
    const mobileInput = document.getElementById('mobile_no');
    const customerSuggestions = document.getElementById('customer-suggestions');
    const newCustomerForm = document.getElementById('new-customer-form');
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    let debounceTimeout;

    // Payment method toggle
    paymentMethodSelect.addEventListener('change', function () {
        trxIdField.classList.toggle('hidden', this.value !== 'bank');
        document.getElementById('trx_id').required = this.value === 'bank';
    });

    // Fetch service cost
    serviceSelect.addEventListener('change', fetchServiceCost);

    // Mobile autocomplete
    mobileInput.addEventListener('input', function () {
        clearTimeout(debounceTimeout);
        debounceTimeout = setTimeout(() => {
            const query = this.value.trim();
            customerSuggestions.classList.add('hidden');
            newCustomerForm.classList.add('hidden');
            if (query.length < 7) return;

            fetch("{{ route('service-orders.search-customer') }}?mobile_no=" + encodeURIComponent(query), {
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
            })
            .then(res => res.ok ? res.json() : Promise.reject())
            .then(data => {
                customerSuggestions.innerHTML = '';
                if (data.customers && data.customers.length) {
                    data.customers.forEach(c => {
                        const div = document.createElement('div');
                        div.className = 'px-4 py-2 hover:bg-gray-100 cursor-pointer';
                        div.textContent = `${c.mobile_no} - ${c.name} (${c.identity_no})`;
                        div.addEventListener('click', () => {
                            mobileInput.value = c.mobile_no;
                            customerSuggestions.classList.add('hidden');
                            newCustomerForm.classList.add('hidden');
                        });
                        customerSuggestions.appendChild(div);
                    });
                    customerSuggestions.classList.remove('hidden');
                } else {
                    newCustomerForm.classList.remove('hidden');
                }
            })
            .catch(() => newCustomerForm.classList.remove('hidden'));
        }, 300);
    });

    document.addEventListener('click', function (e) {
        if (!mobileInput.contains(e.target) && !customerSuggestions.contains(e.target)) {
            customerSuggestions.classList.add('hidden');
        }
    });

    function fetchServiceCost() {
        const serviceId = serviceSelect.value;
        if (!serviceId) { totalCostInput.value = ''; return; }
        fetch("{{ route('service-orders.get-service-cost') }}?service_id=" + serviceId, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrfToken }
        })
        .then(res => res.ok ? res.json() : Promise.reject())
        .then(data => totalCostInput.value = data.cost ?? '')
        .catch(() => totalCostInput.value = '');
    }

    // Initial fetch if pre-selected
    fetchServiceCost();
});
</script>
@endpush
@endsection