@php
    $stopType = $stopType ?? 'shipper';
    $index = $index ?? 1;
    $stop = $stop ?? null;
    $title = $stopType === 'shipper' ? 'Shipper' : 'Consignee';
    $notesLabel = $stopType === 'shipper' ? 'Shipping Notes' : 'Delivery Notes';
    $lookup = $stopType;
    $modalId = $stopType === 'shipper' ? 'addShipperModal' : 'addConsigneeModal';
    $customsEntry = $customsEntry ?? null;
    $showCustomsBroker = $stopType === 'shipper' && (int) $index === 1;
    $scheduledAt = isset($stop->scheduled_at) ? \Illuminate\Support\Carbon::parse($stop->scheduled_at) : null;
    $showTime = (bool) ($stop->show_time ?? true);
    $selectedTime = '';
    if ($showTime && $scheduledAt) {
        $minutes = ((int) $scheduledAt->format('H') * 60) + (int) $scheduledAt->format('i');
        $roundedMinutes = (int) (round($minutes / 15) * 15);
        $selectedTime = sprintf('%02d:%02d', intdiv($roundedMinutes, 60) % 24, $roundedMinutes % 60);
    }
    $timeOptions = [];
    for ($hour = 0; $hour < 24; $hour++) {
        foreach ([0, 15, 30, 45] as $minute) {
            $timeOptions[] = sprintf('%02d:%02d', $hour, $minute);
        }
    }
@endphp
<div class="load-stop-panel {{ $index === 1 ? '' : 'd-none' }}" data-stop-panel data-stop-type="{{ $stopType }}" data-stop-index="{{ $index }}">
    <div class="d-flex justify-content-end mb-2">
        <button type="button" class="btn btn-sm btn-outline-danger {{ $index === 1 ? 'd-none' : '' }}" data-remove-load-tab="{{ $stopType }}" title="Remove {{ $title }}">
            <i class="fa-solid fa-ban me-1"></i> Remove
        </button>
    </div>
    <div class="row g-3">
        <div class="col-md-4 form-group-with-btn form-group-with-info">
            <label class="ff-label">{{ $title }}</label>
            <select class="form-select ff-input" data-field="company_id" data-lookup="{{ $lookup }}" data-selected="{{ $stop->company_id ?? '' }}"></select>
            <button type="button" class="btn-company-info" title="View / edit {{ strtolower($title) }}" data-open-company-details data-company-role="{{ $lookup }}" data-company-field="company_id"><i class="fa-solid fa-circle-info"></i></button>
            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#{{ $modalId }}" data-pending-company-select="company_id"><i class="fa-solid fa-plus"></i></button>
        </div>
        <div class="col-md-4 dispatch-location-wrap">
            <label class="ff-label">Location</label>
            <input type="text" class="form-control ff-input dispatch-location-search" data-field="location_address" data-location-role="{{ $stopType }}" placeholder="Enter a Name, Address, or City..." autocomplete="off" value="{{ $stop->location_address ?? '' }}">
            <input type="hidden" data-field="location_name" value="{{ $stop->location_name ?? '' }}">
            <div class="dispatch-location-results list-group"></div>
        </div>
        <div class="col-md-2">
            <label class="ff-label">City</label>
            <input type="text" class="form-control ff-input" data-field="city" value="{{ $stop->city ?? '' }}">
        </div>
        <div class="col-md-2">
            <label class="ff-label">Date</label>
            <input type="date" class="form-control ff-input" data-field="scheduled_at" value="{{ $scheduledAt?->format('Y-m-d') ?? '' }}">
        </div>
        <div class="col-md-2 ff-stop-time-wrap {{ $showTime ? '' : 'd-none' }}">
            <label class="ff-label">Time (24h)</label>
            <select class="form-select ff-input ff-stop-time-select" data-field="scheduled_time">
                <option value="">Please Select</option>
                @foreach ($timeOptions as $timeOption)
                    <option value="{{ $timeOption }}" @selected($selectedTime === $timeOption)>{{ $timeOption }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="ff-label">Description</label>
            <input type="text" class="form-control ff-input" data-field="description" value="{{ $stop->description ?? '' }}">
        </div>
        <div class="col-md-3">
            <label class="ff-label">Type (TL, LTL…)</label>
            <input type="text" class="form-control ff-input" data-field="commodity_type" value="{{ $stop->commodity_type ?? '' }}">
        </div>
        <div class="col-md-2">
            <label class="ff-label">Qty</label>
            <input type="number" step="any" class="form-control ff-input" data-field="quantity" value="{{ $stop->quantity ?? '' }}">
        </div>
        <div class="col-md-2">
            <label class="ff-label">Weight (lbs)</label>
            <input type="number" step="any" class="form-control ff-input" data-field="weight_lbs" value="{{ $stop->weight_lbs ?? '' }}">
        </div>
        <div class="col-md-2">
            <label class="ff-label">Value ($)</label>
            <input type="number" step="any" class="form-control ff-input" data-field="cargo_value" value="{{ $stop->cargo_value ?? '' }}">
        </div>
        <div class="col-md-4">
            <label class="ff-label">{{ $notesLabel }}</label>
            <input type="text" class="form-control ff-input" data-field="primary_notes" value="{{ $stop->primary_notes ?? '' }}">
        </div>
        <div class="col-md-4">
            <label class="ff-label">P.O. Numbers</label>
            <input type="text" class="form-control ff-input" data-field="po_numbers" value="{{ $stop->po_numbers ?? '' }}">
        </div>
        <div class="col-md-2">
            <label class="ff-label">Appointment</label>
            <select class="form-select ff-input" data-field="appointment_type">
                <option value="no" @selected(($stop->appointment_type ?? 'no') === 'no')>No</option>
                <option value="yes" @selected(($stop->appointment_type ?? 'no') === 'yes')>Yes</option>
                <option value="fcfs" @selected(($stop->appointment_type ?? 'no') === 'fcfs')>FCFS</option>
            </select>
        </div>
        <input type="hidden" data-field="country_id" value="{{ $stop->country_id ?? '' }}">
        <input type="hidden" data-field="state_province_id" value="{{ $stop->state_province_id ?? '' }}">
        @if($showCustomsBroker)
        <div class="col-md-4 form-group-with-btn form-group-with-info">
            <label class="ff-label">Customs Broker</label>
            <select class="form-select ff-input" data-field="customs_broker_company_id" data-lookup="customs_broker" data-selected="{{ $customsEntry?->customs_broker_company_id ?? '' }}"></select>
            <button type="button" class="btn-company-info" title="View / edit customs broker" data-open-company-details data-company-role="customs_broker" data-company-field="customs_broker_company_id"><i class="fa-solid fa-circle-info"></i></button>
            <button type="button" class="btn-add" data-bs-toggle="modal" data-bs-target="#addCustomsBrokerModal" data-pending-company-select="customs_broker_company_id"><i class="fa-solid fa-plus"></i></button>
            <input type="hidden" data-field="border_crossing" value="{{ $customsEntry?->border_crossing ?? '' }}">
        </div>
        @endif
        <div class="col-md-12 d-flex align-items-center gap-2">
            <input type="checkbox" class="form-check-input mt-0" data-field="show_time" id="show_time_{{ $stopType }}_{{ $index }}" {{ $showTime ? 'checked' : '' }}>
            <label class="form-check-label" for="show_time_{{ $stopType }}_{{ $index }}">Show Time</label>
        </div>
    </div>
</div>