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

@section('head')
<style>
    /* ── Stepper ── */
    .ld-steps { display: flex; align-items: flex-start; justify-content: center; margin: 0 auto 24px; max-width: 540px; }
    .ld-step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .ld-pill { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: #e2e8f0; color: #64748b; font-size: .9rem; transition: all .2s; }
    .ld-pill--active, .ld-pill--done { background: #0d9488; color: #fff; }
    .ld-step-label { font-size: .72rem; font-weight: 700; color: #94a3b8; }
    .ld-step-item--active .ld-step-label, .ld-step-item--done .ld-step-label { color: #0f766e; }
    .ld-step-line { flex: 1; height: 2px; background: #e2e8f0; margin: 17px 8px 0; min-width: 28px; transition: background .2s; }
    .ld-step-line--done { background: #0d9488; }

    /* ── Step panels ── */
    .ld-step { animation: ldFade .25s ease; }
    @keyframes ldFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

    /* Section sub-label */
    .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; }

    /* ── Equipment / truck-type tiles ── */
    .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; }
    @media (max-width: 520px) { .ld-tile__box { width: 30vw; height: 76px; font-size: .72rem; } }

    /* ── Step 2: form left, map right (mirrors reservation) ── */
    .ld-route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
    @media (max-width: 900px) { .ld-route-grid { grid-template-columns: 1fr; } }
    .ld-map-card { position: sticky; top: 16px; }
    .ld-map { width: 100%; height: 430px; 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; }

    /* ── Step 3: review summary ── */
    .ld-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
    @media (max-width: 560px) { .ld-summary { grid-template-columns: 1fr; } }
    .ld-sum-row { display: flex; flex-direction: column; gap: 2px; }
    .ld-sum-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 700; }
    .ld-sum-val { font-size: .95rem; color: #0f172a; font-weight: 600; word-break: break-word; }

    /* ── Footer nav + error ── */
    .ld-err { list-style: disc; margin: 0 0 14px; padding: 10px 16px 10px 32px; background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626; border-radius: 10px; color: #dc2626; font-size: .86rem; }
    .ld-footer { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
    .ld-footer-spacer { flex: 1; }
</style>
@endsection

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

    {{-- Stepper --}}
    <div class="ld-steps">
        <div class="ld-step-item ld-step-item--active" data-stepitem="1">
            <span class="ld-pill ld-pill--active" data-step="1">1</span>
            <span class="ld-step-label">Load Details</span>
        </div>
        <span class="ld-step-line" data-line="1"></span>
        <div class="ld-step-item" data-stepitem="2">
            <span class="ld-pill" data-step="2">2</span>
            <span class="ld-step-label">Route</span>
        </div>
        <span class="ld-step-line" data-line="2"></span>
        <div class="ld-step-item" data-stepitem="3">
            <span class="ld-pill" data-step="3">3</span>
            <span class="ld-step-label">Review</span>
        </div>
    </div>

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

        {{-- ════════ STEP 1 — LOAD DETAILS ════════ --}}
        <div class="ld-step" data-step="1">
            <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>

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

        {{-- ════════ STEP 2 — ROUTE (form left, map right) ════════ --}}
        <div class="ld-step" data-step="2" style="display:none;">
            <div class="ld-route-grid">
                <div class="ld-route-col">
                    <div class="card">
                        <h2><i class="fas fa-location-dot"></i> Pickup</h2>
                        <div class="field" style="margin-bottom:14px;"><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>
                        <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="field" style="margin-bottom:14px;"><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>
                        <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>
                </div>
                <div class="ld-route-col">
                    <div class="card ld-map-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>
            </div>
        </div>

        {{-- ════════ STEP 3 — REVIEW & NOTES ════════ --}}
        <div class="ld-step" data-step="3" style="display:none;">
            <div class="card">
                <h2><i class="fas fa-clipboard-check"></i> Review Your Load</h2>
                <div class="ld-summary" id="ldSummary"></div>
            </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>

        {{-- ════════ NAV ════════ --}}
        <ul id="ldErr" class="ld-err" style="display:none;"></ul>
        <div class="ld-footer">
            <a href="{{ route('freight.client.loads') }}" class="btn btn-light"><i class="fas fa-times"></i> Cancel</a>
            <div class="ld-footer-spacer"></div>
            <button type="button" id="ldBack" class="btn btn-light" style="display:none;"><i class="fas fa-chevron-left"></i> Back</button>
            <button type="button" id="ldNext" class="btn btn-primary">Next <i class="fas fa-chevron-right"></i></button>
            <button type="submit" id="ldSubmit" class="btn btn-primary" style="display:none;"><i class="fas fa-save"></i> {{ $isEdit ? 'Update Load' : 'Post Load' }}</button>
        </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, currentStep = 1, totalSteps = 3;

    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 escapeHtml(s) { var d = document.createElement('div'); d.textContent = s; return d.innerHTML; }

    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() {
        if (!ldMap) return;
        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';
        }
    }

    /* ── Step navigation ── */
    function showStep(n) {
        currentStep = n;
        document.querySelectorAll('.ld-step').forEach(function (s) {
            s.style.display = (parseInt(s.dataset.step) === n) ? 'block' : 'none';
        });
        document.querySelectorAll('.ld-pill').forEach(function (p) {
            var ps = parseInt(p.dataset.step);
            p.classList.toggle('ld-pill--active', ps === n);
            p.classList.toggle('ld-pill--done', ps < n);
        });
        document.querySelectorAll('.ld-step-item').forEach(function (it) {
            var ps = parseInt(it.dataset.stepitem);
            it.classList.toggle('ld-step-item--active', ps === n);
            it.classList.toggle('ld-step-item--done', ps < n);
        });
        document.querySelectorAll('.ld-step-line').forEach(function (l) {
            l.classList.toggle('ld-step-line--done', parseInt(l.dataset.line) < n);
        });
        document.getElementById('ldBack').style.display = n > 1 ? 'inline-flex' : 'none';
        document.getElementById('ldNext').style.display = n < totalSteps ? 'inline-flex' : 'none';
        document.getElementById('ldSubmit').style.display = n === totalSteps ? 'inline-flex' : 'none';
        document.getElementById('ldErr').style.display = 'none';
        if (n === 2 && ldMap) { setTimeout(function () { google.maps.event.trigger(ldMap, 'resize'); updateRoute(); }, 120); }
        if (n === 3) buildSummary();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function validateStep(n) {
        var errs = [];
        if (n === 1) {
            if (!document.querySelector('[name="title"]').value.trim()) errs.push('Load title is required');
            if (!document.querySelector('input[name="equipment_type"]:checked')) errs.push('Please choose an equipment / truck type');
        }
        if (n === 2) {
            if (!document.getElementById('pickup_location').value.trim()) errs.push('Pickup location is required');
            if (!document.getElementById('dropoff_location').value.trim()) errs.push('Drop-off location is required');
        }
        return errs;
    }
    function showErr(list) {
        var box = document.getElementById('ldErr');
        box.innerHTML = list.map(function (m) { return '<li>' + escapeHtml(m) + '</li>'; }).join('');
        box.style.display = 'block';
    }

    function buildSummary() {
        function v(sel) { var el = document.querySelector(sel); return (el && el.value.trim()) ? el.value.trim() : '—'; }
        var equip = (document.querySelector('input[name="equipment_type"]:checked') || {}).value || '—';
        var rate = v('[name="rate_offer"]'); if (rate !== '—') rate = '$' + rate;
        var dist = document.getElementById('distance_miles').value; dist = dist ? dist + ' miles' : '—';
        var rows = [
            ['Load Title', v('[name="title"]')],
            ['Commodity', v('[name="commodity"]')],
            ['Equipment', equip],
            ['Weight', v('[name="weight"]') === '—' ? '—' : v('[name="weight"]') + ' lbs'],
            ['Dimensions', v('[name="dimensions"]')],
            ['Rate Offered', rate],
            ['Pickup', v('#pickup_location')],
            ['Pickup Date', v('[name="pickup_date"]')],
            ['Drop-off', v('#dropoff_location')],
            ['Drop-off Date', v('[name="dropoff_date"]')],
            ['Distance', dist],
        ];
        document.getElementById('ldSummary').innerHTML = rows.map(function (r) {
            return '<div class="ld-sum-row"><span class="ld-sum-label">' + r[0] + '</span><span class="ld-sum-val">' + escapeHtml(r[1]) + '</span></div>';
        }).join('');
    }

    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();
    }

    window.addEventListener('load', function () {
        initLoadMap();
        document.getElementById('ldNext').addEventListener('click', function () {
            var errs = validateStep(currentStep);
            if (errs.length) { showErr(errs); return; }
            showStep(currentStep + 1);
        });
        document.getElementById('ldBack').addEventListener('click', function () {
            if (currentStep > 1) showStep(currentStep - 1);
        });
        showStep(1);
    });
</script>
@endsection