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

@section('head')
<style>
    /* Section sub-label (matches the reservation form's required-field headings) */
    .ld-section-label {
        font-size: .82rem;
        font-weight: 700;
        color: #334155;
        margin: 18px 0 10px;
    }
    .ld-section-label .text-danger { color: #dc2626; padding-right: 3px; }

    /* Icon-tile selector — same interaction/look as the reservation service-type
       & airport tiles, themed in the freight portal's teal accent. */
    .ld-tiles {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .ld-tile { cursor: pointer; margin: 0; }
    .ld-tile input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .ld-tile__box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 108px;
        height: 84px;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        color: #64748b;
        font-size: .78rem;
        font-weight: 600;
        text-align: center;
        padding: 6px;
        transition: all .15s ease;
    }
    .ld-tile__box i {
        font-size: 1.35rem;
        margin-bottom: 6px;
        transition: color .15s ease;
    }
    .ld-tile__box:hover {
        border-color: #94a3b8;
        background: #f8fafc;
    }
    .ld-tile input:checked + .ld-tile__box {
        border-color: #0d9488;
        background: #f0fdfa;
        color: #0f766e;
        box-shadow: 0 0 0 1px #0d9488;
    }
    .ld-tile input:checked + .ld-tile__box i { color: #0d9488; }
    .ld-tile input:focus-visible + .ld-tile__box {
        box-shadow: 0 0 0 3px rgba(13, 148, 136, .25);
    }
    @media (max-width: 520px) {
        .ld-tile__box { width: 30vw; height: 76px; font-size: .72rem; }
    }

    /* Route map + distance readout (mirrors the reservation form's map) */
    .ld-map {
        width: 100%;
        height: 340px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #eef2f7;
    }
    .ld-route-meta {
        display: none;
        gap: 24px;
        flex-wrap: wrap;
        margin-top: 12px;
        font-size: .9rem;
        color: #475569;
    }
    .ld-route-meta i { color: #0d9488; margin-right: 5px; }
    .ld-route-meta strong { color: #0f172a; }
</style>
@endsection

@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>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>

            {{-- Equipment / Truck Type — icon-tile selector (same pattern as the reservation form) --}}
            <div class="ld-section-label"><span class="text-danger">*</span> Equipment / Truck Type</div>
            @php
                $types = [
                    ['name' => 'Dry Van',    'icon' => 'fa-truck'],
                    ['name' => 'Flatbed',    'icon' => 'fa-truck-pickup'],
                    ['name' => 'Reefer',     'icon' => 'fa-snowflake'],
                    ['name' => 'Step Deck',  'icon' => 'fa-layer-group'],
                    ['name' => 'Box Truck',  'icon' => 'fa-truck-moving'],
                    ['name' => 'Tanker',     'icon' => 'fa-gas-pump'],
                    ['name' => 'Lowboy',     'icon' => 'fa-trailer'],
                    ['name' => 'Hotshot',    'icon' => 'fa-bolt'],
                    ['name' => 'Power Only', 'icon' => 'fa-truck-front'],
                    ['name' => 'Other',      'icon' => 'fa-ellipsis'],
                ];
                $selectedType = old('equipment_type', $load->equipment_type);
            @endphp
            <div class="ld-tiles">
                @foreach($types as $t)
                    <label class="ld-tile">
                        <input type="radio" name="equipment_type" value="{{ $t['name'] }}" {{ $selectedType === $t['name'] ? 'checked' : '' }}>
                        <span class="ld-tile__box">
                            <i class="fas {{ $t['icon'] }}"></i>
                            <span>{{ $t['name'] }}</span>
                        </span>
                    </label>
                @endforeach
            </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…" autocomplete="off" required></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>
            {{-- City / State / Zip / coords captured silently from the Google address --}}
            <input type="hidden" id="pickup_city" name="pickup_city" value="{{ old('pickup_city', $load->pickup_city) }}">
            <input type="hidden" id="pickup_state" name="pickup_state" value="{{ old('pickup_state', $load->pickup_state) }}">
            <input type="hidden" id="pickup_zip" name="pickup_zip" value="{{ old('pickup_zip', $load->pickup_zip) }}">
            <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…" autocomplete="off" required></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>
            <input type="hidden" id="dropoff_city" name="dropoff_city" value="{{ old('dropoff_city', $load->dropoff_city) }}">
            <input type="hidden" id="dropoff_state" name="dropoff_state" value="{{ old('dropoff_state', $load->dropoff_state) }}">
            <input type="hidden" id="dropoff_zip" name="dropoff_zip" value="{{ old('dropoff_zip', $load->dropoff_zip) }}">
            <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>

        {{-- Route map + auto-computed distance (mirrors the reservation form's map) --}}
        <div class="card">
            <h2><i class="fas fa-route"></i> Route &amp; Distance</h2>
            <div id="loadMap" class="ld-map"></div>
            <div class="ld-route-meta" id="routeMeta">
                <span><i class="fas fa-road"></i> Estimated Distance: <strong id="routeDistance">—</strong></span>
                <span><i class="fas fa-clock"></i> Estimated Time: <strong id="routeTime">—</strong></span>
            </div>
            <input type="hidden" id="distance_miles" name="distance_miles" value="{{ old('distance_miles', $load->distance_miles) }}">
        </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>
    var ldMap, ldDirSvc, ldDirRenderer, ldSingleMarker = null;

    function setVal(id, v) { var el = document.getElementById(id); if (el) el.value = v; }
    function getLatLng(prefix) {
        var lat = parseFloat(document.getElementById(prefix + '_lat').value);
        var lng = parseFloat(document.getElementById(prefix + '_lng').value);
        if (isNaN(lat) || isNaN(lng)) return null;
        return { lat: lat, lng: lng };
    }
    function clearSingleMarker() { if (ldSingleMarker) { ldSingleMarker.setMap(null); ldSingleMarker = null; } }

    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) {
                setVal(prefix + '_lat', place.geometry.location.lat());
                setVal(prefix + '_lng', 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);
            });
            updateRoute();
        });
    }

    function updateRoute() {
        var p = getLatLng('pickup'), d = getLatLng('dropoff');
        if (p && d) {
            clearSingleMarker();
            ldDirSvc.route({ origin: p, destination: d, travelMode: google.maps.TravelMode.DRIVING },
                function (res, status) {
                    if (status === 'OK') {
                        ldDirRenderer.setDirections(res);
                        var leg = res.routes[0].legs[0];
                        var miles = (leg.distance.value / 1609.34).toFixed(1);
                        setVal('distance_miles', miles);
                        document.getElementById('routeDistance').textContent = miles + ' miles';
                        document.getElementById('routeTime').textContent = leg.duration.text;
                        document.getElementById('routeMeta').style.display = 'flex';
                    }
                });
        } else if (p || d) {
            ldDirRenderer.set('directions', null);
            clearSingleMarker();
            var pt = p || d;
            ldSingleMarker = new google.maps.Marker({ position: pt, map: ldMap });
            ldMap.setCenter(pt); ldMap.setZoom(11);
            document.getElementById('routeMeta').style.display = 'none';
        }
    }

    function initLoadMap() {
        ldMap = new google.maps.Map(document.getElementById('loadMap'), {
            center: { lat: 39.0997, lng: -94.5786 }, // Kansas City default
            zoom: 5,
            mapTypeControl: false,
            streetViewControl: false,
        });
        ldDirSvc = new google.maps.DirectionsService();
        ldDirRenderer = new google.maps.DirectionsRenderer({ map: ldMap });
        bindAutocomplete('pickup');
        bindAutocomplete('dropoff');
        updateRoute(); // draw saved route in edit mode
    }

    window.addEventListener('load', initLoadMap);
</script>
@endsection