<?php
if (Auth('admin')->User()->dashboard_style == 'light') {
    $text = 'dark';
} else {
    $text = 'light';
}
?>

@extends('layouts.app')

@section('content')

<style>
    .edit-shipment-page {
        --es-bg: #eef3fb;
        --es-card: rgba(255, 255, 255, 0.96);
        --es-border: rgba(148, 163, 184, 0.24);
        --es-text: #0f172a;
        --es-muted: #64748b;
        --es-blue: #2563eb;
        --es-indigo: #4f46e5;
        --es-green: #059669;
        --es-orange: #f97316;
        --es-red: #dc2626;
        --es-yellow: #facc15;
        --es-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --es-shadow-soft: 0 8px 25px rgba(15, 23, 42, 0.06);

        margin: -0.5rem -1rem 0;
        padding: 1.5rem 1.25rem 2rem;
        min-height: calc(100vh - 8rem);
        color: var(--es-text);
        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .15), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .18), transparent 30%),
            radial-gradient(circle at 50% 100%, rgba(5, 150, 105, .10), transparent 35%),
            linear-gradient(135deg, #f8fbff 0%, var(--es-bg) 100%);
        position: relative;
        overflow-x: hidden;
    }

    .edit-shipment-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 78%);
        pointer-events: none;
    }

    .edit-shipment-page > * {
        position: relative;
        z-index: 2;
    }

    .edit-shipment-hero {
        background:
            linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 64, 175, 0.92)),
            radial-gradient(circle at 88% 10%, rgba(250, 204, 21, .28), transparent 28%);
        border: 1px solid rgba(255,255,255,.14);
        border-radius: 26px;
        padding: 1.75rem;
        box-shadow: var(--es-shadow);
        color: #fff;
        margin-bottom: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .edit-shipment-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        right: -90px;
        top: -110px;
        background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
        pointer-events: none;
    }

    .edit-shipment-hero-content,
    .edit-shipment-actions {
        position: relative;
        z-index: 2;
    }

    .edit-shipment-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: #bfdbfe;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 999px;
        padding: .42rem .8rem;
        margin-bottom: .85rem;
    }

    .edit-shipment-hero h1 {
        color: #fff;
        font-size: clamp(1.5rem, 2vw, 2.1rem);
        letter-spacing: -.04em;
        margin-bottom: .4rem;
        font-weight: 900;
    }

    .edit-shipment-hero p {
        color: rgba(226, 232, 240, .92);
        max-width: 46rem;
        margin-bottom: 0;
        line-height: 1.6;
    }

    .edit-shipment-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .6rem;
    }

    .es-action-btn {
        border-radius: 14px;
        font-weight: 900;
        padding: .72rem 1rem;
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        white-space: nowrap;
        border: none;
        transition: all .18s ease;
    }

    .es-action-btn:hover {
        transform: translateY(-2px);
    }

    .es-theme-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        background: rgba(255,255,255,.14);
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.20);
    }

    .es-theme-toggle:hover {
        background: rgba(255,255,255,.22);
        color: #fff !important;
    }

    .es-back-btn {
        background: rgba(255,255,255,.14);
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.20);
    }

    .es-back-btn:hover {
        background: rgba(255,255,255,.22);
        color: #fff !important;
    }

    .edit-form-card,
    .es-card {
        background: var(--es-card);
        border: 1px solid var(--es-border);
        border-radius: 22px;
        box-shadow: var(--es-shadow-soft);
        backdrop-filter: blur(14px);
        overflow: hidden;
        color: var(--es-text);
    }

    .edit-form-card > .card-body {
        padding: 1.5rem;
    }

    .es-card-header {
        padding: 1.05rem 1.25rem;
        background: rgba(255,255,255,.70);
        border-bottom: 1px solid rgba(148, 163, 184, .18);
    }

    .es-card-header h5 {
        margin: 0;
        color: var(--es-text);
        font-weight: 900;
        letter-spacing: -.02em;
        display: flex;
        align-items: center;
        gap: .55rem;
    }

    .es-card-header h5 i {
        color: var(--es-blue);
    }

    .tracking-edit-box {
        padding: 1.5rem;
        text-align: center;
    }

    .barcode-wrap {
        display: inline-block;
        max-width: 100%;
        background: #fff;
        border: 1px solid rgba(148, 163, 184, .22);
        border-radius: 18px;
        padding: 1rem;
        margin-top: .5rem;
        margin-bottom: 1rem;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .barcode-wrap img {
        max-width: 100%;
    }

    .es-form-group {
        margin-bottom: 1rem;
    }

    .es-form-group label {
        color: var(--es-text);
        font-size: .82rem;
        font-weight: 900;
        margin-bottom: .45rem;
        letter-spacing: -.01em;
    }

    .es-form-group small,
    .form-text {
        color: var(--es-muted) !important;
        font-weight: 600;
        font-size: .76rem;
    }

    .es-form-group .form-control,
    .es-form-group select,
    .edit-shipment-page .form-control {
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, .28);
        background: #ffffff;
        color: var(--es-text);
        font-weight: 700;
        transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }

    .es-form-group textarea.form-control {
        min-height: 96px;
        resize: vertical;
    }

    .es-form-group .form-control:focus,
    .edit-shipment-page .form-control:focus {
        border-color: rgba(37, 99, 235, .55);
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
        background: #ffffff;
        color: var(--es-text);
    }

    .form-control-plaintext {
        min-height: 46px;
        border-radius: 14px;
        border: 1px solid rgba(249, 115, 22, .24);
        background: linear-gradient(135deg, #fff7ed, #ffffff);
        color: #9a3412;
        font-weight: 900;
        padding: .65rem .85rem;
    }

    .current-photo-box {
        background: #f8fafc;
        border: 1px dashed rgba(148, 163, 184, .42);
        border-radius: 16px;
        padding: .85rem;
        margin-top: .75rem;
    }

    .current-photo-box p {
        margin-bottom: .55rem;
        color: var(--es-muted);
        font-weight: 800;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .current-photo-box img {
        max-height: 160px;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, .24);
        background: #fff;
        padding: .25rem;
    }

    .form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: .5rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(148, 163, 184, .18);
    }

    .btn-update-shipment {
        background: linear-gradient(135deg, #2563eb, #4f46e5);
        color: #fff !important;
        border: none;
        border-radius: 14px;
        padding: .78rem 1.25rem;
        font-weight: 900;
        box-shadow: 0 14px 28px rgba(37, 99, 235, .24);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .btn-update-shipment:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(37, 99, 235, .32);
    }

    .btn-cancel-shipment {
        background: #f8fafc;
        color: #334155 !important;
        border: 1px solid rgba(148, 163, 184, .28);
        border-radius: 14px;
        padding: .78rem 1.25rem;
        font-weight: 900;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .btn-cancel-shipment:hover {
        background: #e2e8f0;
        color: #0f172a !important;
    }

    .alert {
        border-radius: 16px;
        border: none;
    }

    body.dark-mode {
        background: #020617;
        color: #e2e8f0;
    }

    body.dark-mode .edit-shipment-page {
        --es-bg: #020617;
        --es-card: rgba(15, 23, 42, 0.94);
        --es-border: rgba(71, 85, 105, 0.62);
        --es-text: #f8fafc;
        --es-muted: #94a3b8;

        background:
            radial-gradient(circle at 8% 8%, rgba(37, 99, 235, .18), transparent 28%),
            radial-gradient(circle at 94% 14%, rgba(245, 158, 11, .12), transparent 30%),
            linear-gradient(135deg, #020617 0%, #0f172a 100%);
    }

    body.dark-mode .edit-form-card,
    body.dark-mode .es-card {
        background: rgba(15, 23, 42, .94);
        border-color: rgba(71, 85, 105, .70);
    }

    body.dark-mode .es-card-header {
        background: rgba(30, 41, 59, .72);
        border-color: rgba(71, 85, 105, .62);
    }

    body.dark-mode .es-form-group .form-control,
    body.dark-mode .es-form-group select,
    body.dark-mode .edit-shipment-page .form-control {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(71, 85, 105, .78);
    }

    body.dark-mode .es-form-group .form-control:focus,
    body.dark-mode .edit-shipment-page .form-control:focus {
        background: #0f172a;
        color: #f8fafc;
        border-color: rgba(96, 165, 250, .75);
        box-shadow: 0 0 0 4px rgba(96, 165, 250, .12);
    }

    body.dark-mode .form-control-plaintext {
        background: rgba(249, 115, 22, .12);
        border-color: rgba(249, 115, 22, .32);
        color: #fed7aa;
    }

    body.dark-mode .barcode-wrap,
    body.dark-mode .current-photo-box {
        background: #020617;
        border-color: rgba(71, 85, 105, .72);
    }

    body.dark-mode .btn-cancel-shipment {
        background: #1e293b;
        color: #e2e8f0 !important;
        border-color: #334155;
    }

    body.dark-mode .btn-cancel-shipment:hover {
        background: #334155;
    }

    body.dark-mode .text-muted {
        color: #94a3b8 !important;
    }

    @media (max-width: 768px) {
        .edit-shipment-page {
            padding: 1rem .85rem 1.5rem;
            margin-left: -.75rem;
            margin-right: -.75rem;
        }

        .edit-shipment-hero {
            padding: 1.35rem;
        }

        .edit-shipment-actions {
            justify-content: stretch;
            margin-top: 1rem;
        }

        .edit-shipment-actions .es-back-btn {
            flex: 1;
            justify-content: center;
        }

        .edit-form-card > .card-body,
        .tracking-edit-box {
            padding: 1rem;
        }

        .form-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>

<div class="edit-shipment-page">
    <div class="edit-shipment-hero">
        <div class="row align-items-center">
            <div class="col-lg-7">
                <div class="edit-shipment-hero-content">
                    <span class="edit-shipment-badge">
                        <i class="fa fa-edit"></i>
                        Shipment Editor
                    </span>

                    <h1>Edit Shipment</h1>

                    <p>
                        Update shipment information, customer details, package data, tracking number, barcode preview, status, and cost summary.
                    </p>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="edit-shipment-actions">
                    <button id="darkToggle" type="button" class="btn es-action-btn es-theme-toggle" title="Toggle dark mode">
                        <i class="fa fa-moon"></i>
                    </button>

                    <a href="{{ route('admin.shipments') }}" class="btn es-action-btn es-back-btn">
                        <i class="fa fa-arrow-left"></i>
                        Back to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <x-danger-alert />
    <x-success-alert />

    <div class="row">
        <div class="col-md-12">
            <div class="edit-form-card">
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('admin.shipments.update') }}" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="id" value="{{ $shipment->id }}">

                        <div class="row">
                            <!-- Tracking Info -->
                            <div class="col-md-12 mb-4">
                                <div class="es-card">
                                    <div class="es-card-header">
                                        <h5>
                                            <i class="fa fa-barcode"></i>
                                            Tracking & Status
                                        </h5>
                                    </div>

                                    <div class="tracking-edit-box">
                                        <div class="form-group es-form-group">
                                            <label for="trackingnumber">Tracking Number</label>
                                            <input type="text" class="form-control mb-3" id="trackingnumber" name="trackingnumber" value="{{ old('trackingnumber', $shipment->trackingnumber) }}" required>
                                            <small class="form-text text-muted mb-3">Edit the tracking number if needed. Barcode will update automatically.</small>
                                        </div>

                                        <div class="barcode-wrap">
                                            <img id="barcode-img" src="https://barcode.tec-it.com/barcode.ashx?data={{ $shipment->trackingnumber }}&code=Code128" alt="{{ $shipment->trackingnumber }}" class="img-fluid">
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="status">Current Status</label>
                                            @php
                                                $statusOptions = [
                                                    'Order Confirmed',
                                                    'Picked by Courier',
                                                    'On The Way',
                                                    'Custom Hold',
                                                    'Delivered',
                                                    'Customs Inspection',
                                                    'Customs Clearance',
                                                    'Processing Shipment',
                                                    'In transit',
                                                    'Out for delivery',
                                                    'Seized by custom',
                                                    'Awaiting Payment',
                                                ];
                                            @endphp
                                            <select class="form-control" id="status" name="status">
                                                @foreach($statusOptions as $status)
                                                    <option value="{{ $status }}" {{ old('status', $shipment->status) == $status ? 'selected' : '' }}>{{ $status }}</option>
                                                @endforeach
                                            </select>
                                            <small class="form-text text-muted">Changing status here will create a tracking record and send email alerts. Use the Update Status page if you need to choose not to email.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Sender Information -->
                            <div class="col-md-6">
                                <div class="es-card mb-4">
                                    <div class="es-card-header">
                                        <h5>
                                            <i class="fa fa-user-edit"></i>
                                            Sender Information
                                        </h5>
                                    </div>

                                    <div class="card-body">
                                        <div class="form-group es-form-group">
                                            <label for="sname">Sender Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="sname" name="sname" value="{{ old('sname', $shipment->sname) }}" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="semail">Sender Email</label>
                                            <input type="email" class="form-control" id="semail" name="semail" value="{{ old('semail', $shipment->semail) }}">
                                            <small class="form-text text-muted">Used for shipment status email alerts to the sender.</small>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="saddress">Sender Address <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="saddress" name="saddress" rows="3" required>{{ old('saddress', $shipment->saddress) }}</textarea>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="take_off_point">Origin Office <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="take_off_point" name="take_off_point" value="{{ old('take_off_point', $shipment->take_off_point) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Receiver Information -->
                            <div class="col-md-6">
                                <div class="es-card mb-4">
                                    <div class="es-card-header">
                                        <h5>
                                            <i class="fa fa-user-check"></i>
                                            Receiver Information
                                        </h5>
                                    </div>

                                    <div class="card-body">
                                        <div class="form-group es-form-group">
                                            <label for="name">Receiver Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="name" name="name" value="{{ old('name', $shipment->name) }}" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="email">Receiver Email <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control" id="email" name="email" value="{{ old('email', $shipment->email) }}" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="phone">Receiver Phone <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="phone" name="phone" value="{{ old('phone', $shipment->phone) }}" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="address">Receiver Address <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="address" name="address" rows="3" required>{{ old('address', $shipment->address) }}</textarea>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="final_destination">Destination Office <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="final_destination" name="final_destination" value="{{ old('final_destination', $shipment->final_destination) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Shipment Details -->
                            <div class="col-md-6">
                                <div class="es-card mb-4">
                                    <div class="es-card-header">
                                        <h5>
                                            <i class="fa fa-box-open"></i>
                                            Shipment Details
                                        </h5>
                                    </div>

                                    <div class="card-body">
                                        <div class="form-group es-form-group">
                                            <label for="qty">Quantity <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="qty" name="qty" value="{{ old('qty', $shipment->qty) }}" min="1" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="weight">Weight (kg)</label>
                                            <input type="number" step="0.01" class="form-control" id="weight" name="weight" value="{{ old('weight', $shipment->weight) }}">
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="freight_type">Freight Type</label>
                                            <select class="form-control" id="freight_type" name="freight_type">
                                                <option value="Air Freight" {{ old('freight_type', $shipment->freight_type) == 'Air Freight' ? 'selected' : '' }}>Air Freight</option>
                                                <option value="Sea Freight" {{ old('freight_type', $shipment->freight_type) == 'Sea Freight' ? 'selected' : '' }}>Sea Freight</option>
                                                <option value="Road Freight" {{ old('freight_type', $shipment->freight_type) == 'Road Freight' ? 'selected' : '' }}>Road Freight</option>
                                                <option value="Rail Freight" {{ old('freight_type', $shipment->freight_type) == 'Rail Freight' ? 'selected' : '' }}>Rail Freight</option>
                                            </select>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="description">Description <span class="text-danger">*</span></label>
                                            <textarea class="form-control" id="description" name="description" rows="4" required>{{ old('description', $shipment->description) }}</textarea>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="photo">Shipment Photo</label>
                                            <input type="file" class="form-control" id="photo" name="photo">
                                            <small class="form-text text-muted">Upload a new image to replace the existing one (if any)</small>

                                            @if($shipment->photo)
                                                <div class="current-photo-box">
                                                    <p>Current photo:</p>
                                                    <img src="{{ asset('public/' . $shipment->photo) }}" alt="Shipment Photo" class="img-thumbnail">
                                                </div>
                                            @endif
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="date_shipped">Pickup Date</label>
                                            <input type="datetime-local" class="form-control" id="date_shipped" name="date_shipped" value="{{ old('date_shipped', $shipment->date_shipped) }}">
                                            <small class="form-text text-muted">Set the date and time the shipment was picked up.</small>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="expected_delivery">Expected Delivery Date</label>
                                            <input type="datetime-local" class="form-control" id="expected_delivery" name="expected_delivery" value="{{ old('expected_delivery', $shipment->expected_delivery) }}">
                                            <small class="form-text text-muted">Set the expected delivery date and time.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Cost Information -->
                            <div class="col-md-6">
                                <div class="es-card mb-4">
                                    <div class="es-card-header">
                                        <h5>
                                            <i class="fa fa-coins"></i>
                                            Cost Information
                                        </h5>
                                    </div>

                                    <div class="card-body">
                                        <div class="form-group es-form-group">
                                            <label for="cost">Shipping Cost ({{ $settings->s_currency }}) <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="cost" name="cost" value="{{ old('cost', $shipment->cost) }}" min="0" step="0.01" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="clearance_cost">Clearance Cost ({{ $settings->s_currency }}) <span class="text-danger">*</span></label>
                                            <input type="number" class="form-control" id="clearance_cost" name="clearance_cost" value="{{ old('clearance_cost', $shipment->clearance_cost) }}" min="0" step="0.01" required>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="total_cost">Total Cost ({{ $settings->s_currency }})</label>
                                            <input type="text" class="form-control-plaintext" id="total_cost" readonly>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="payment_method">Payment Method</label>
                                            <select class="form-control" id="payment_method" name="payment_method">
                                                <option value="To Pay" {{ old('payment_method', $shipment->plan) == 'To Pay' ? 'selected' : '' }}>To Pay (Receiver Pays)</option>
                                                <option value="Prepaid" {{ old('payment_method', $shipment->plan) == 'Prepaid' ? 'selected' : '' }}>Prepaid (Sender Pays)</option>
                                                <option value="Third Party" {{ old('payment_method', $shipment->plan) == 'Third Party' ? 'selected' : '' }}>Third Party</option>
                                            </select>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="payment_status">Payment Status</label>
                                            <select class="form-control" id="payment_status" name="payment_status">
                                                <option value="Paid" {{ old('payment_status', $shipment->payment_status) == 'Paid' ? 'selected' : '' }}>Paid</option>
                                                <option value="Unpaid" {{ old('payment_status', $shipment->payment_status) == 'Unpaid' ? 'selected' : '' }}>Unpaid</option>
                                            </select>
                                            <small class="form-text text-muted">Set whether the shipment cost has been paid. If Unpaid, the tracking page will show a payment button.</small>
                                        </div>

                                        <div class="form-group es-form-group">
                                            <label for="percentage_complete">Delivery Percentage Completed</label>
                                            <input type="number" class="form-control" id="percentage_complete" name="percentage_complete" value="{{ old('percentage_complete', $shipment->percentage_complete) }}" min="0" max="100">
                                            <small class="form-text text-muted">Enter a value between 0 and 100.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="col-md-12 mt-2">
                                <div class="form-actions">
                                    <button type="submit" class="btn btn-update-shipment">
                                        <i class="fa fa-save"></i>
                                        Update Shipment
                                    </button>

                                    <a href="{{ route('admin.shipments.view', $shipment->id) }}" class="btn btn-cancel-shipment">
                                        <i class="fa fa-times-circle"></i>
                                        Cancel
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const darkToggle = document.getElementById('darkToggle');

        function setDarkIcon() {
            if (!darkToggle) return;
            const isDark = document.body.classList.contains('dark-mode');
            darkToggle.innerHTML = isDark ? '<i class="fa fa-sun"></i>' : '<i class="fa fa-moon"></i>';
        }

        const savedTheme = localStorage.getItem('admin_theme_mode') || localStorage.getItem('theme') || 'light';
        if (window.applyGlobalAdminTheme) {
            window.applyGlobalAdminTheme(savedTheme === 'dark' ? 'dark' : 'light');
        } else {
            document.documentElement.classList.toggle('admin-dark-mode', savedTheme === 'dark');
            document.body.classList.toggle('dark-mode', savedTheme === 'dark');
            document.body.setAttribute('data-admin-theme', savedTheme === 'dark' ? 'dark' : 'light');
        }

        setDarkIcon();

        if (darkToggle) {
            darkToggle.addEventListener('click', function () {
                const isDark = !document.body.classList.contains('dark-mode');
                const mode = isDark ? 'dark' : 'light';
                localStorage.setItem('admin_theme_mode', mode);
                localStorage.setItem('theme', mode);
                if (window.applyGlobalAdminTheme) {
                    window.applyGlobalAdminTheme(mode);
                } else {
                    document.documentElement.classList.toggle('admin-dark-mode', isDark);
                    document.body.classList.toggle('dark-mode', isDark);
                    document.body.setAttribute('data-admin-theme', mode);
                }
                setDarkIcon();
            });
        }

        function calculateTotal() {
            const shippingCost = parseFloat(document.getElementById('cost').value) || 0;
            const clearanceCost = parseFloat(document.getElementById('clearance_cost').value) || 0;
            const totalCost = shippingCost + clearanceCost;
            document.getElementById('total_cost').value = totalCost.toFixed(2);
        }

        calculateTotal();

        document.getElementById('cost').addEventListener('input', calculateTotal);
        document.getElementById('clearance_cost').addEventListener('input', calculateTotal);

        const trackingInput = document.getElementById('trackingnumber');
        const barcodeImg = document.getElementById('barcode-img');

        trackingInput.addEventListener('input', function() {
            const trackingNumber = this.value.trim();

            if (trackingNumber) {
                barcodeImg.src = `https://barcode.tec-it.com/barcode.ashx?data=${encodeURIComponent(trackingNumber)}&code=Code128`;
                barcodeImg.alt = trackingNumber;
            }
        });
    });
</script>

@endsection
