@extends('freight-client.layouts.app')
@section('title', $load->exists ? 'Edit Load' : 'Post a Load')

@section('content')
    @php $isEdit = $load->exists; @endphp
    <h1 style="font-size:1.5rem;font-weight:800;margin:0 0 20px;">
        {{ $isEdit ? 'Edit Load ' . $load->reference_no : 'Post a New Load' }}
    </h1>

    <form method="POST" action="{{ $isEdit ? route('freight.client.loads.update', $load->id) : route('freight.client.loads.store') }}">
        @csrf
        @if($isEdit) @method('PUT') @endif

        <div class="card">
            <h2><i class="fas fa-box"></i> Shipment Details</h2>
            <div class="grid">
                <div class="field"><label>Load Title *</label><input type="text" name="title" value="{{ old('title', $load->title) }}" placeholder="e.g. 12 pallets of canned goods" required></div>
                <div class="field"><label>Commodity</label><input type="text" name="commodity" value="{{ old('commodity', $load->commodity) }}" placeholder="What is being shipped"></div>
                <div class="field">
                    <label>Equipment / Truck Type</label>
                    <select name="equipment_type">
                        @php $types = ['Dry Van','Flatbed','Reefer','Step Deck','Box Truck','Tanker','Lowboy','Hotshot','Power Only','Other']; @endphp
                        <option value="">— Select —</option>
                        @foreach($types as $t)
                            <option value="{{ $t }}" {{ old('equipment_type', $load->equipment_type) === $t ? 'selected' : '' }}>{{ $t }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field"><label>Weight (lbs)</label><input type="text" name="weight" value="{{ old('weight', $load->weight) }}" placeholder="e.g. 18000"></div>
                <div class="field"><label>Dimensions</label><input type="text" name="dimensions" value="{{ old('dimensions', $load->dimensions) }}" placeholder="L x W x H"></div>
                <div class="field"><label>Rate Offered (USD)</label><input type="number" step="0.01" name="rate_offer" value="{{ old('rate_offer', $load->rate_offer) }}" placeholder="e.g. 1500"></div>
            </div>
        </div>

        <div class="card">
            <h2><i class="fas fa-location-dot"></i> Pickup</h2>
            <div class="grid">
                <div class="field" style="grid-column:1/-1;"><label>Pickup Location / Address *</label><input type="text" id="pickup_location" name="pickup_location" value="{{ old('pickup_location', $load->pickup_location) }}" placeholder="Start typing an address…" required></div>
                <div class="field"><label>City</label><input type="text" id="pickup_city" name="pickup_city" value="{{ old('pickup_city', $load->pickup_city) }}"></div>
                <div class="field"><label>State</label><input type="text" id="pickup_state" name="pickup_state" value="{{ old('pickup_state', $load->pickup_state) }}"></div>
                <div class="field"><label>Zip</label><input type="text" id="pickup_zip" name="pickup_zip" value="{{ old('pickup_zip', $load->pickup_zip) }}"></div>
                <div class="field"><label>Pickup Date</label><input type="date" name="pickup_date" value="{{ old('pickup_date', optional($load->pickup_date)->format('Y-m-d')) }}"></div>
            </div>
            <input type="hidden" id="pickup_lat" name="pickup_lat" value="{{ old('pickup_lat', $load->pickup_lat) }}">
            <input type="hidden" id="pickup_lng" name="pickup_lng" value="{{ old('pickup_lng', $load->pickup_lng) }}">
        </div>

        <div class="card">
            <h2><i class="fas fa-flag-checkered"></i> Drop-off</h2>
            <div class="grid">
                <div class="field" style="grid-column:1/-1;"><label>Drop-off Location / Address *</label><input type="text" id="dropoff_location" name="dropoff_location" value="{{ old('dropoff_location', $load->dropoff_location) }}" placeholder="Start typing an address…" required></div>
                <div class="field"><label>City</label><input type="text" id="dropoff_city" name="dropoff_city" value="{{ old('dropoff_city', $load->dropoff_city) }}"></div>
                <div class="field"><label>State</label><input type="text" id="dropoff_state" name="dropoff_state" value="{{ old('dropoff_state', $load->dropoff_state) }}"></div>
                <div class="field"><label>Zip</label><input type="text" id="dropoff_zip" name="dropoff_zip" value="{{ old('dropoff_zip', $load->dropoff_zip) }}"></div>
                <div class="field"><label>Drop-off Date</label><input type="date" name="dropoff_date" value="{{ old('dropoff_date', optional($load->dropoff_date)->format('Y-m-d')) }}"></div>
                <div class="field"><label>Distance (miles)</label><input type="text" name="distance_miles" value="{{ old('distance_miles', $load->distance_miles) }}"></div>
            </div>
            <input type="hidden" id="dropoff_lat" name="dropoff_lat" value="{{ old('dropoff_lat', $load->dropoff_lat) }}">
            <input type="hidden" id="dropoff_lng" name="dropoff_lng" value="{{ old('dropoff_lng', $load->dropoff_lng) }}">
        </div>

        <div class="card">
            <h2><i class="fas fa-note-sticky"></i> Notes</h2>
            <div class="field"><textarea name="notes" rows="3" placeholder="Special handling, contact info, etc.">{{ old('notes', $load->notes) }}</textarea></div>
            @if($isEdit)
                <div class="field" style="margin-top:14px;max-width:260px;">
                    <label>Status</label>
                    <select name="status">
                        @foreach(\App\Models\Freight\FreightLoad::STATUSES as $key => $label)
                            <option value="{{ $key }}" {{ old('status', $load->status) === $key ? 'selected' : '' }}>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
        </div>

        <div style="display:flex;gap:12px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ $isEdit ? 'Update Load' : 'Post Load' }}</button>
            <a href="{{ route('freight.client.loads') }}" class="btn btn-light">Cancel</a>
        </div>
    </form>
@endsection

@section('scripts')
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyClBMaAaaRWoxV6N5jT1RfFdyeEUS0VhAE"></script>
<script>
    function bindAutocomplete(prefix) {
        var input = document.getElementById(prefix + '_location');
        if (!input || !window.google || !google.maps.places) return;
        var ac = new google.maps.places.Autocomplete(input, { types: ['geocode'] });
        ac.addListener('place_changed', function () {
            var place = ac.getPlace();
            if (place.geometry) {
                document.getElementById(prefix + '_lat').value = place.geometry.location.lat();
                document.getElementById(prefix + '_lng').value = place.geometry.location.lng();
            }
            (place.address_components || []).forEach(function (c) {
                if (c.types.indexOf('locality') > -1) setVal(prefix + '_city', c.long_name);
                if (c.types.indexOf('administrative_area_level_1') > -1) setVal(prefix + '_state', c.short_name);
                if (c.types.indexOf('postal_code') > -1) setVal(prefix + '_zip', c.long_name);
            });
        });
    }
    function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v; }
    window.addEventListener('load', function () {
        bindAutocomplete('pickup');
        bindAutocomplete('dropoff');
    });
</script>
@endsection