@extends('layouts.master')

@section('title')
{{ __('home.external_edits') }}
@stop

@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Spectrum-colorpicker css -->
<link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">
<!-- Internal Select2 css -->
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
    /* ==========================================================
       External Edit Details Modern UI
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

    /* كروت الأقسام */
    .ext-detail-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
        margin-bottom: 22px;
        overflow: hidden;
    }

    .ext-detail-card-header {
        background: #0f172a;
        color: #ffffff;
        padding: 15px 20px;
        font-size: 15px;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* قائمة بيانات العميل */
    .detail-info-list .list-group-item {
        padding: 13px 18px;
        border-color: #f1f5f9;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .detail-info-list .list-group-item:hover {
        background-color: #f8fafc;
    }

    .detail-info-label {
        color: #64748b;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .detail-info-value {
        font-weight: 800;
        color: #0f172a;
    }

    /* جدول الخدمات */
    .table-services {
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e2e8f0 !important;
    }

    .table-services thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        padding: 13px 14px !important;
        border: none !important;
    }

    .table-services tbody td {
        vertical-align: middle !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        color: #1e293b;
    }

    .table-services tbody tr:hover {
        background-color: #f8fafc !important;
    }

    /* أزرار التحكم العلوية */
    .btn-header-back {
        background: #ffffff;
        border: 1.5px solid #cbd5e1;
        color: #334155 !important;
        font-weight: 800;
        font-size: 13.5px;
        padding: 8px 18px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .btn-header-back:hover {
        background: #0f172a;
        color: #ffffff !important;
        border-color: #0f172a;
    }

    .btn-header-print {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        color: #ffffff !important;
        font-weight: 800;
        font-size: 13.5px;
        padding: 8px 20px;
        border-radius: 8px;
        border: none;
        box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .btn-header-print:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(2, 132, 199, 0.45);
    }
</style>
@endsection

@section('content')
<div class="container-fluid p-2 mt-2">

    {{-- رأس الصفحة وأزرار التحكم --}}
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div class="d-flex align-items-center">
            <div class="bg-primary text-white rounded d-flex align-items-center justify-content-center mr-2" style="width: 38px; height: 38px;">
                <i class="fa fa-file-text-o" style="font-size: 17px;"></i>
            </div>
            <div>
                <h4 class="mb-0 font-weight-bold text-dark">{{ __('home.view_details') }} - #{{ $request->id }}</h4>
                <span class="text-muted tx-13 font-weight-bold">تفاصيل أمر التعديل الخارجي والبيانات المالية</span>
            </div>
        </div>

        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('external.edits.index') }}" class="btn-header-back">
                <i class="fa fa-arrow-right"></i>
                <span>{{ __('home.back') }}</span>
            </a>
            <a href="{{ route('external.edits.print', $request->id) }}" class="btn-header-print">
                <i class="fa fa-print"></i>
                <span>{{ __('home.print') }}</span>
            </a>
        </div>
    </div>

    <div class="row">

        {{-- الجانب الأيمن: بيانات العميل + الملخص المالي --}}
        <div class="col-lg-4 col-md-5 mb-3">

            {{-- كارت بيانات العميل --}}
            <div class="ext-detail-card mb-3">
                <div class="ext-detail-card-header">
                    <span><i class="fa fa-user-circle-o ml-2 text-primary"></i> {{ __('home.customer_info') }}</span>
                    <span class="badge badge-light border px-2 py-1 font-weight-bold text-dark">#{{ $request->id }}</span>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush detail-info-list">
                        <li class="list-group-item">
                            <span class="detail-info-label"><i class="fa fa-user text-muted"></i> {{ __('home.name') }}:</span>
                            <span class="detail-info-value">{{ $request->customer->name }}</span>
                        </li>
                        <li class="list-group-item">
                            <span class="detail-info-label"><i class="fa fa-phone text-muted"></i> {{ __('home.phone') }}:</span>
                            <span class="detail-info-value" dir="ltr">{{ $request->customer->phone }}</span>
                        </li>
                        <li class="list-group-item">
                            <span class="detail-info-label"><i class="fa fa-building-o text-muted"></i> {{ __('home.branch') }}:</span>
                            <span class="detail-info-value">{{ $request->branch->name ?? '---' }}</span>
                        </li>
                        <li class="list-group-item">
                            <span class="detail-info-label"><i class="fa fa-user-plus text-muted"></i> {{ __('home.user') }}:</span>
                            <span class="detail-info-value">{{ $request->user->name ?? '---' }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            {{-- كارت الملخص المالي --}}
            <div class="ext-detail-card">
                <div class="ext-detail-card-header" style="background: #1e293b;">
                    <span><i class="fa fa-money ml-2 text-success"></i> {{ __('home.financial_summary') }}</span>
                </div>
                <div class="card-body p-3">

                    {{-- الإجمالي --}}
                    <div class="d-flex justify-content-between align-items-center p-2 mb-2 rounded bg-light">
                        <span class="font-weight-bold text-muted">{{ __('home.total') }}:</span>
                        <span class="font-weight-bold text-dark h6 mb-0">{{ number_format($request->total_amount, 2) }} ريال</span>
                    </div>

                    {{-- المدفوع --}}
                    <div class="d-flex justify-content-between align-items-center p-2 mb-2 rounded" style="background: #ecfdf5;">
                        <span class="font-weight-bold text-success">{{ __('home.paid') }}:</span>
                        <span class="font-weight-bold text-success h6 mb-0">{{ number_format($request->paid_amount, 2) }} ريال</span>
                    </div>

                    {{-- المتبقي --}}
                    <div class="d-flex justify-content-between align-items-center p-2 rounded" style="background: #fff1f2; border: 1px solid #fecdd3;">
                        <span class="font-weight-bold text-danger">{{ __('home.remaining') }}:</span>
                        <span class="font-weight-bold text-danger h5 mb-0">{{ number_format($request->remaining_amount, 2) }} ريال</span>
                    </div>

                </div>
            </div>

        </div>

        {{-- الجانب الأيسر: جدول الخدمات والتعديلات المطلوبة + الملاحظات --}}
        <div class="col-lg-8 col-md-7 mb-3">
            <div class="ext-detail-card h-100">

                <div class="ext-detail-card-header" style="background: #0f172a;">
                    <span><i class="fa fa-list-ul ml-2 text-info"></i> {{ __('home.services_requested') }}</span>
                    <small class="text-muted" style="color: #94a3b8 !important;">عدد البنود: {{ count($request->items) }}</small>
                </div>

                <div class="card-body p-4">

                    <div class="table-responsive mb-3">
                        <table class="table table-hover text-center table-services" width="100%">
                            <thead>
                                <tr>
                                    <th width="35%" class="text-right pr-4">{{ __('home.service') }}</th>
                                    <th width="45%" class="text-right pr-3">{{ __('home.notes') }}</th>
                                    <th width="20%">{{ __('home.price') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($request->items as $item)
                                <tr>
                                    {{-- اسم الخدمة --}}
                                    <td class="text-right pr-4 font-weight-bold text-dark">
                                        <i class="fa fa-check text-primary ml-1 small"></i>
                                        {{ $item->service_name }}
                                    </td>

                                    {{-- الملاحظات --}}
                                    <td class="text-right pr-3 text-muted font-weight-semibold" style="font-size: 13px;">
                                        {{ $item->notes ?? '---' }}
                                    </td>

                                    {{-- السعر --}}
                                    <td class="font-weight-bold text-dark" style="font-size: 14.5px;">
                                        {{ number_format($item->price, 2) }} <small class="text-muted">ريال</small>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="bg-light font-weight-bold" style="border-top: 2px solid #e2e8f0;">
                                    <td colspan="2" class="text-right pr-4 text-dark font-weight-bold">
                                        {{ __('home.total') }}:
                                    </td>
                                    <td class="font-weight-bold text-primary" style="font-size: 16px;">
                                        {{ number_format($request->total_amount, 2) }} <small>ريال</small>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    {{-- الملاحظات العامة --}}
                    @if($request->notes)
                        <div class="mt-4 p-3 rounded" style="background: #f8fafc; border: 1.5px dashed #cbd5e1;">
                            <h6 class="font-weight-bold text-dark mb-1">
                                <i class="fa fa-sticky-note-o text-warning ml-1"></i> {{ __('home.general_notes') }}:
                            </h6>
                            <p class="mb-0 text-muted font-weight-semibold" style="line-height: 1.6; font-size: 13.5px;">
                                {{ $request->notes }}
                            </p>
                        </div>
                    @endif

                </div>
            </div>
        </div>

    </div>
</div>
@endsection