@extends('admin.layouts.app')

@section('title', 'جزئیات بار')

@section('content')
@include('admin.partials.iran-plate', ['loadStylesOnly' => true])
<div class="row">
    <!-- Load Details -->
    <div class="col-lg-8">
        <div class="card mb-4">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">اطلاعات بار #{{ $load->id }}</h5>
                @if($load->status === 'pending')
                    <span class="badge bg-warning">در انتظار تایید</span>
                @elseif($load->status === 'approved')
                    <span class="badge bg-info">تایید شده</span>
                @elseif($load->status === 'assigned')
                    <span class="badge bg-primary">تخصیص داده شده</span>
                @elseif($load->status === 'in_progress')
                    <span class="badge bg-primary">در حال انجام</span>
                @elseif($load->status === 'completed')
                    <span class="badge bg-success">تکمیل شده</span>
                @else
                    <span class="badge bg-danger">لغو شده</span>
                @endif
            </div>

            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="text-muted mb-1">عنوان بار</label>
                        <p class="fw-bold">{{ $load->title }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted mb-1">نوع بار</label>
                        <p class="fw-bold">{{ $load->cargo_type ?? 'نامشخص' }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-4">
                        <label class="text-muted mb-1">وزن (کیلوگرم)</label>
                        <p class="fw-bold">{{ $load->weight ? number_format($load->weight) : '-' }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="text-muted mb-1">حجم (متر مکعب)</label>
                        <p class="fw-bold">{{ $load->volume ? number_format($load->volume) : '-' }}</p>
                    </div>
                    <div class="col-md-4">
                        <label class="text-muted mb-1">قیمت (تومان)</label>
                        <p class="fw-bold text-success">{{ number_format($load->price) }}</p>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-12">
                        <label class="text-muted mb-1">توضیحات</label>
                        <p>{{ $load->description ?? 'بدون توضیحات' }}</p>
                    </div>
                </div>

                <hr>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="text-muted mb-1">
                            <i class="fas fa-map-marker-alt text-success"></i>
                            مبدا
                        </label>
                        <p>{{ $load->origin_address ?? '-' }}</p>
                        @if($load->origin_lat && $load->origin_lng)
                            <small class="text-muted font-monospace">
                                {{ $load->origin_lat }}, {{ $load->origin_lng }}
                            </small>
                        @endif
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted mb-1">
                            <i class="fas fa-map-marker-alt text-danger"></i>
                            مقصد
                        </label>
                        <p>{{ $load->destination_address ?? '-' }}</p>
                        @if($load->destination_lat && $load->destination_lng)
                            <small class="text-muted font-monospace">
                                {{ $load->destination_lat }}, {{ $load->destination_lng }}
                            </small>
                        @endif
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="text-muted mb-1">زمان بارگیری</label>
                        <p>{{ $load->pickup_time ? \Morilog\Jalali\Jalalian::fromDateTime($load->pickup_time)->format('Y/m/d H:i') : '-' }}</p>
                    </div>
                    <div class="col-md-6">
                        <label class="text-muted mb-1">زمان تحویل</label>
                        <p>{{ $load->delivery_time ? \Morilog\Jalali\Jalalian::fromDateTime($load->delivery_time)->format('Y/m/d H:i') : '-' }}</p>
                    </div>
                </div>

                <hr>

                <div class="row">
                    <div class="col-md-6">
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>
                            تاریخ ثبت: {{ $load->created_at ? \Morilog\Jalali\Jalalian::fromDateTime($load->created_at)->format('Y/m/d H:i') : '-' }}
                        </small>
                    </div>
                    <div class="col-md-6">
                        <small class="text-muted">
                            <i class="fas fa-edit me-1"></i>
                            آخرین بروزرسانی: {{ $load->updated_at ? \Morilog\Jalali\Jalalian::fromDateTime($load->updated_at)->format('Y/m/d H:i') : '-' }}
                        </small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Map -->
        @if($load->origin_lat && $load->origin_lng && $load->destination_lat && $load->destination_lng)
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">نقشه مسیر</h5>
            </div>
            <div class="card-body">
                <div id="loadMap" style="height: 400px; border-radius: 0.5rem;"></div>
            </div>
        </div>
        @endif
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <!-- Requester Info -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">درخواست کننده</h5>
            </div>
            <div class="card-body">
                @if($load->requester)
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            {{ mb_substr($load->requester->name, 0, 1) }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ $load->requester->name }}</h6>
                            <small class="text-muted">مشتری</small>
                        </div>
                    </div>
                    <div class="mb-2">
                        <i class="fas fa-phone text-muted me-2"></i>
                        <span class="font-monospace">{{ $load->requester->phone }}</span>
                    </div>
                    @if($load->requester->email)
                    <div class="mb-2">
                        <i class="fas fa-envelope text-muted me-2"></i>
                        <span>{{ $load->requester->email }}</span>
                    </div>
                    @endif
                    <a href="{{ route('admin.users.show', $load->requester->id) }}" class="btn btn-sm btn-outline-primary w-100 mt-2">
                        <i class="fas fa-user me-1"></i>
                        مشاهده پروفایل
                    </a>
                @else
                    <p class="text-muted">اطلاعاتی یافت نشد</p>
                @endif
            </div>
        </div>

        <!-- Driver Info / Assignment -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">راننده</h5>
            </div>
            <div class="card-body">
                @if($load->driver)
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            {{ mb_substr($load->driver->name, 0, 1) }}
                        </div>
                        <div>
                            <h6 class="mb-0">{{ $load->driver->name }}</h6>
                            <small class="text-muted">راننده</small>
                        </div>
                    </div>
                    <div class="mb-2">
                        <i class="fas fa-phone text-muted me-2"></i>
                        <span class="font-monospace">{{ $load->driver->phone }}</span>
                    </div>
                    @if($load->driver->vehicle_plate)
                    <div class="mb-2">
                        <i class="fas fa-car text-muted me-2"></i>
                        <div class="mt-2">@include('admin.partials.iran-plate', ['plate' => $load->driver->vehicle_plate, 'size' => 'sm'])</div>
                    </div>
                    @endif
                    <a href="{{ route('admin.drivers.show', $load->driver->id) }}" class="btn btn-sm btn-outline-success w-100 mt-2">
                        <i class="fas fa-user me-1"></i>
                        مشاهده پروفایل
                    </a>
                @else
                    <p class="text-muted mb-3">راننده تخصیص داده نشده</p>

                    @if(in_array($load->status, ['approved', 'assigned']))
                    <form action="{{ route('admin.loads.assign-driver', $load->id) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">انتخاب راننده</label>
                            <select name="driver_id" class="form-select" required>
                                <option value="">انتخاب کنید</option>
                                @foreach($availableDrivers ?? [] as $driver)
                                    <option value="{{ $driver->id }}">{{ $driver->name }} ({{ $driver->phone }})</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-user-plus me-2"></i>
                            تخصیص راننده
                        </button>
                    </form>
                    @endif
                @endif
            </div>
        </div>

        <!-- Status Actions -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">عملیات</h5>
            </div>
            <div class="card-body">
                @if($load->status === 'pending')
                    <button class="btn btn-success w-100 mb-2" onclick="updateStatus('approved')">
                        <i class="fas fa-check me-2"></i>
                        تایید بار
                    </button>
                    <button class="btn btn-danger w-100" onclick="updateStatus('cancelled')">
                        <i class="fas fa-times me-2"></i>
                        رد بار
                    </button>
                @elseif($load->status === 'approved')
                    <div class="alert alert-info mb-3">
                        <div class="d-flex align-items-center">
                            <div class="spinner-border spinner-border-sm text-info me-2" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <div>
                                <strong>در حال صدور بارنامہ...</strong><br>
                                <small>لطفا صبر کنید</small>
                            </div>
                        </div>
                    </div>
                    <button class="btn btn-info w-100 mb-2" data-bs-toggle="modal" data-bs-target="#billModal">
                        <i class="fas fa-file-invoice me-2"></i>
                        ثبت بارنامہ
                    </button>
                    <button class="btn btn-danger w-100" onclick="updateStatus('cancelled')">
                        <i class="fas fa-times me-2"></i>
                        رد بار
                    </button>
                @elseif($load->status === 'assigned')
                    <button class="btn btn-primary w-100" onclick="updateStatus('in_progress')">
                        <i class="fas fa-truck me-2"></i>
                        شروع حمل
                    </button>
                @elseif($load->status === 'in_progress')
                    <button class="btn btn-success w-100" onclick="updateStatus('completed')">
                        <i class="fas fa-check-circle me-2"></i>
                        تکمیل بار
                    </button>
                @endif

                @if(!in_array($load->status, ['completed', 'cancelled']))
                    <hr>
                    <button class="btn btn-outline-danger w-100" onclick="updateStatus('cancelled')">
                        <i class="fas fa-ban me-2"></i>
                        لغو بار
                    </button>
                @endif

                @if($load->bill)
                    <hr>
                    <a href="{{ route('admin.bills.show', $load->bill->id) }}" class="btn btn-outline-primary w-100">
                        <i class="fas fa-file-alt me-2"></i>
                        نمایش حواله
                    </a>
                @endif

                <hr>
                <div class="text-muted small mb-2">گردش کار داخلی (حواله/بارنامه)</div>
                @if(!$load->dispatch_issued_at)
                    <form action="{{ route('admin.loads.issue-dispatch', $load->id) }}" method="POST" class="mb-2">
                        @csrf
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fas fa-file-signature me-2"></i> صدور حواله اولیه
                        </button>
                    </form>
                @else
                    <div class="alert alert-success py-2 mb-2 small">
                        <i class="fas fa-check"></i> حواله: <strong>{{ $load->dispatch_order_number }}</strong>
                    </div>
                @endif

                @if($load->dispatch_issued_at && !$load->bill)
                    <form action="{{ route('admin.loads.issue-bill', $load->id) }}" method="POST" class="mb-2">
                        @csrf
                        <button type="submit" class="btn btn-success w-100">
                            <i class="fas fa-file-contract me-2"></i> صدور بارنامه
                        </button>
                    </form>
                @elseif($load->bill && $load->bill->bill_number)
                    <div class="alert alert-info py-2 mb-2 small">
                        <i class="fas fa-check"></i> بارنامه: <strong>{{ $load->bill->bill_number }}</strong>
                    </div>
                    @if($load->bill->tracking_code)
                        <a href="{{ route('waybill.print', $load->bill->tracking_code) }}" target="_blank" class="btn btn-outline-info w-100 mb-2">
                            <i class="fas fa-print me-2"></i> چاپ بارنامه
                        </a>
                    @endif
                @endif
            </div>
        </div>
    </div>
</div>
<!-- Bill of Lading Modal -->
<div class="modal fade" id="billModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ثبت بارنامہ در سسٹم RMTO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="billForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">نام فرستنده</label>
                            <input type="text" class="form-control" name="sender_name" value="{{ $load->sender_name ?? '' }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">کد ملی فرستنده</label>
                            <input type="text" class="form-control" name="sender_national_code" value="{{ $load->sender_national_code ?? '' }}" maxlength="10" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">نام گیرنده</label>
                            <input type="text" class="form-control" name="receiver_name" value="{{ $load->receiver_name ?? '' }}" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">کد ملی گیرنده</label>
                            <input type="text" class="form-control" name="receiver_national_code" value="{{ $load->receiver_national_code ?? '' }}" maxlength="10" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">توضیحات کالا</label>
                        <textarea class="form-control" name="cargo_details" rows="3">{{ $load->description ?? '' }}</textarea>
                    </div>
                    <div id="registrationResults" style="display: none;">
                        <div class="alert alert-success">
                            <h6 class="mb-2">بارنامہ با موفقیت ثبت شد!</h6>
                            <div id="resultsContent"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
                    <button type="button" class="btn btn-primary" id="submitBill">ثبت بارنامہ</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    @if($load->origin_lat && $load->origin_lng && $load->destination_lat && $load->destination_lng)
    // Initialize map (Neshan SDK)
    const map = new L.Map('loadMap', {
        key: '{{ config('services.neshan.map_api_key') }}',
        maptype: 'neshan',
        poi: false,
        traffic: false,
        center: [{{ $load->origin_lat }}, {{ $load->origin_lng }}],
        zoom: 12,
    });

    // Origin marker
    const originIcon = L.divIcon({
        html: '<i class="fas fa-map-marker-alt fa-2x text-success"></i>',
        iconSize: [30, 30],
        className: 'custom-div-icon'
    });

    L.marker([{{ $load->origin_lat }}, {{ $load->origin_lng }}], { icon: originIcon })
        .bindPopup('<strong>مبدا</strong><br>{{ $load->origin_address }}')
        .addTo(map);

    // Destination marker
    const destIcon = L.divIcon({
        html: '<i class="fas fa-map-marker-alt fa-2x text-danger"></i>',
        iconSize: [30, 30],
        className: 'custom-div-icon'
    });

    L.marker([{{ $load->destination_lat }}, {{ $load->destination_lng }}], { icon: destIcon })
        .bindPopup('<strong>مقصد</strong><br>{{ $load->destination_address }}')
        .addTo(map);

    // Draw line between points
    const latlngs = [
        [{{ $load->origin_lat }}, {{ $load->origin_lng }}],
        [{{ $load->destination_lat }}, {{ $load->destination_lng }}]
    ];

    L.polyline(latlngs, {
        color: '#1e3a8a',
        weight: 3,
        opacity: 0.7,
        dashArray: '10, 10'
    }).addTo(map);

    // Fit bounds to show both markers
    const bounds = L.latLngBounds(latlngs);
    map.fitBounds(bounds, { padding: [50, 50] });
    @endif

    function updateStatus(status) {
        const statusTexts = {
            'approved': 'تایید',
            'in_progress': 'شروع حمل',
            'completed': 'تکمیل',
            'cancelled': 'لغو'
        };

        if (confirm(`آیا از ${statusTexts[status]} این بار اطمینان دارید؟`)) {
            showLoading();
            $.ajax({
                url: '{{ route("admin.loads.update-status", $load->id) }}',
                method: 'POST',
                data: {
                    status: status
                },
                success: function(response) {
                    hideLoading();
                    showToast('وضعیت بار با موفقیت به‌روز شد', 'success');
                    setTimeout(() => location.reload(), 1000);
                },
                error: function(xhr) {
                    hideLoading();
                    showToast('خطا در به‌روزرسانی وضعیت', 'error');
                }
            });
        }
    }

    // Bill of Lading Registration
    document.getElementById('submitBill').addEventListener('click', async function() {
        const form = document.getElementById('billForm');
        const submitBtn = this;
        const resultsDiv = document.getElementById('registrationResults');
        const resultsContent = document.getElementById('resultsContent');

        try {
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>درحال ثبت...';

            const response = await fetch('/api/mobile/bill/register', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Accept': 'application/json'
                },
                body: JSON.stringify({
                    load_id: {{ $load->id }},
                    bill_number: 'BILL-' + Date.now(),
                    serial: 'SRL-' + Date.now(),
                    sender_name: form.sender_name.value,
                    sender_national_code: form.sender_national_code.value,
                    receiver_name: form.receiver_name.value,
                    receiver_national_code: form.receiver_national_code.value,
                    cargo_details: form.cargo_details.value,
                    freight_amount: {{ $load->price ?? 0 }},
                    tax_amount: 0,
                    total_amount: {{ $load->price ?? 0 }}
                })
            });

            const data = await response.json();

            if (data.success && data.data) {
                const bill = data.data;
                let html = `
                    <table class="table table-sm">
                        <tbody>
                            <tr><th>شماره بارنامہ</th><td>${bill.bill_number}</td></tr>
                            <tr><th>سریال</th><td>${bill.serial}</td></tr>
                            <tr><th>کد رہگیری</th><td><strong>${bill.tracking_code}</strong></td></tr>
                            <tr><th>مبلغ</th><td>${(bill.amounts?.total || 0).toLocaleString('fa-IR')} تومان</td></tr>
                        </tbody>
                    </table>
                `;
                resultsContent.innerHTML = html;
                resultsDiv.style.display = 'block';
                form.style.display = 'none';
                submitBtn.style.display = 'none';

                setTimeout(() => {
                    window.location.href = '{{ route("admin.bills.index") }}';
                }, 2000);
            } else {
                alert('خطا: ' + (data.message || 'ثبت بارنامہ ناموفق بود'));
            }
        } catch (error) {
            console.error('Error:', error);
            alert('خطا در برقراری ارتباط');
        } finally {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'ثبت بارنامہ';
        }
    });
</script>

<style>
    .custom-div-icon {
        background: transparent;
        border: none;
    }
</style>
@endpush