@extends('layouts.master')

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

@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Data table css -->
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
<link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
<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 Edits Modern Styling
       ========================================================== */
    body {
        background-color: #f1f5f9;
        font-family: 'Segoe UI', Tahoma, 'Inter', sans-serif;
    }

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

    .ext-edits-card-header {
        background: #ffffff;
        border-bottom: 1.5px solid #f1f5f9;
        padding: 18px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* كارت إجمالي المديونيات غير المحصلة */
    .debts-summary-banner {
        background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
        border: 1.5px solid #fecdd3;
        border-radius: 12px;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 22px;
        box-shadow: 0 2px 6px rgba(225, 29, 72, 0.05);
    }

    .debts-summary-banner .debts-amount {
        font-size: 1.4rem;
        font-weight: 900;
        color: #e11d48;
    }

    /* جدول التعديلات الخارجية */
    .table-responsive {
        overflow: visible !important;
    }

    .table-ext-edits {
        margin-bottom: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        overflow: visible !important;
        border: 1px solid #e2e8f0 !important;
    }

    .table-ext-edits thead th {
        background: #0f172a !important;
        color: #ffffff !important;
        font-size: 13.5px !important;
        font-weight: 800 !important;
        padding: 14px 10px !important;
        border: none !important;
        white-space: nowrap;
    }

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

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

    /* أزرار العمليات */
/* ==================== محاذاة وتنسيق أزرار العمليات ==================== */
.actions-btn-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
}

.actions-btn-group .delete-form {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.actions-btn-group .dropdown {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.action-btn-custom {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.action-btn-custom i {
    line-height: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.action-btn-custom.btn-print-act:hover { background: #0284c7 !important; color: #ffffff !important; border-color: #0284c7 !important; }
.action-btn-custom.btn-view-act:hover { background: #475569 !important; color: #ffffff !important; border-color: #475569 !important; }
.action-btn-custom.btn-edit-act:hover { background: #10b981 !important; color: #ffffff !important; border-color: #10b981 !important; }
.action-btn-custom.btn-delete-act:hover { background: #ef4444 !important; color: #ffffff !important; border-color: #ef4444 !important; }
.action-btn-custom.btn-tailor-act:hover { background: #2563eb !important; color: #ffffff !important; border-color: #2563eb !important; }
.action-btn-custom.btn-status-act:hover { background: #f59e0b !important; color: #ffffff !important; border-color: #f59e0b !important; }

    /* القوائم المنسدلة للخيّاطين والحالات */
    .dropdown-menu-custom {
        border-radius: 10px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
        max-height: 240px;
        overflow-y: auto !important;
        z-index: 1060 !important;
        padding: 6px;
    }

    .dropdown-menu-custom .dropdown-item {
        font-size: 13px;
        font-weight: 700;
        padding: 7px 12px;
        border-radius: 6px;
        transition: all 0.15s ease;
    }

    .dropdown-menu-custom .dropdown-item:hover {
        background: #f1f5f9;
        color: #2563eb;
    }

    /* شارات الحالات */
    .status-badge {
        font-size: 12px;
        font-weight: 800;
        padding: 5px 12px;
        border-radius: 6px;
        display: inline-block;
    }

    /* زر إضافة طلب جديد */
    .btn-create-external {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        color: #ffffff !important;
        font-weight: 800;
        font-size: 13.5px;
        padding: 8px 18px;
        border-radius: 9px;
        border: none;
        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s ease;
        text-decoration: none !important;
    }

    .btn-create-external:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 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-3">
        <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-scissors" style="font-size: 17px;"></i>
            </div>
            <div>
                <h4 class="mb-0 font-weight-bold text-dark">{{ __('home.external_edits_record') }}</h4>
                <span class="text-muted tx-13 font-weight-bold">متابعة طلبات التعديلات الخارجية وتعيين الخيّاطين والتحصيل</span>
            </div>
        </div>

        <div>
            <a href="{{ route('external.edits.create') }}" class="btn-create-external">
                <i class="fa fa-plus"></i>
                <span>{{ __('home.add_new_external_edit') }}</span>
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="ext-edits-card">
                <div class="card-body p-4">

                    {{-- كارت ملخص المديونيات غير المحصلة --}}
                    <div class="debts-summary-banner">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-danger text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 44px; height: 44px; background-color: #e11d48 !important;">
                                <i class="fa fa-money" style="font-size: 19px;"></i>
                            </div>
                            <div>
                                <span class="d-block text-muted font-weight-bold small">{{ __('home.total_uncollected_external_debts') }}</span>
                                <span class="debts-amount">{{ number_format($totalRemaining, 2) }}</span>
                                <small class="font-weight-bold text-muted">{{ __('home.currency_sar') }}</small>
                            </div>
                        </div>
                        <span class="badge badge-danger px-3 py-2 font-weight-bold" style="border-radius: 8px;">مستحقات معلقة</span>
                    </div>

                    {{-- جدول التعديلات الخارجية --}}
                    <div class="table-responsive">
                        <table class="table table-hover text-center table-ext-edits" width="100%">
                            <thead>
                                <tr>
                                    <th width="4%">#</th>
                                    <th width="8%">{{ __('home.order_number') }}</th>
                                    <th width="18%" class="text-right pr-3">{{ __('home.customer') }}</th>
                                    <th width="10%">{{ __('home.branch') }}</th>
                                    <th width="10%">{{ __('home.tailor') }}</th>
                                    <th width="9%">{{ __('home.total') }}</th>
                                    <th width="8%">{{ __('home.paid') }}</th>
                                    <th width="8%">{{ __('home.remaining') }}</th>
                                    <th width="9%">{{ __('home.status') }}</th>
                                    <th width="8%">{{ __('home.delivery_date') }}</th>
                                    <th width="8%">{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($requests as $request)
                                <tr>
                                    {{-- 1. التسلسل --}}
                                    <td class="font-weight-bold text-muted">{{ $loop->iteration }}</td>

                                    {{-- 2. رقم الطلب --}}
                                    <td class="font-weight-bold">
                                        <span class="badge badge-light border px-2 py-1" style="color: #0284c7; font-size: 12.5px;">#{{ $request->id }}</span>
                                    </td>

                                    {{-- 3. العميل --}}
                                    <td class="text-right pr-3">
                                        <div class="font-weight-bold text-dark" style="font-size: 14px;">{{ $request->customer->name }}</div>
                                        <small class="text-muted"><i class="fa fa-phone ml-1 text-success"></i> {{ $request->customer->phone }}</small>
                                    </td>

                                    {{-- 4. الفرع --}}
                                    <td class="font-weight-semibold text-secondary">{{ $request->branch->name ?? '---' }}</td>

                                    {{-- 5. الخياط --}}
                                    <td>
                                        @if($request->tailor)
                                            <span class="badge badge-primary px-2 py-1 font-weight-bold" style="border-radius: 6px;">
                                                <i class="fa fa-user ml-1"></i> {{ $request->tailor->name_ar }}
                                            </span>
                                        @else
                                            <span class="badge badge-light text-muted border px-2 py-1">لم يحدد</span>
                                        @endif
                                    </td>

                                    {{-- 6. الإجمالي --}}
                                    <td class="font-weight-bold text-dark">{{ number_format($request->total_amount, 2) }}</td>

                                    {{-- 7. المدفوع --}}
                                    <td class="font-weight-bold text-success">{{ number_format($request->paid_amount, 2) }}</td>

                                    {{-- 8. المتبقي --}}
                                    <td class="font-weight-bold text-danger">{{ number_format($request->remaining_amount, 2) }}</td>

                                    {{-- 9. الحالة --}}
                                    <td>
                                        @if($request->status == 'pending')
                                            <span class="badge badge-warning status-badge text-dark">{{ __('home.pending') }}</span>
                                        @elseif($request->status == 'processing')
                                            <span class="badge badge-info status-badge">{{ __('home.processing') }}</span>
                                        @elseif($request->status == 'delivered')
                                            <span class="badge badge-success status-badge">{{ __('home.delivered') }}</span>
                                        @else
                                            <span class="badge badge-success status-badge">{{ $request->status }}</span>
                                        @endif
                                    </td>

                                    {{-- 10. تاريخ التسليم --}}
                                    <td class="text-muted font-weight-semibold" style="font-size: 12.5px;">
                                        {{ $request->delivery_date ? $request->delivery_date->format('Y-m-d') : '---' }}
                                    </td>

                                    {{-- 11. أزرار العمليات المنسقة --}}
                                    <td>
                                        <div class="actions-btn-group">

                                            {{-- طباعة --}}
                                            <a href="javascript:void(0);"
                                            onclick="printExternalOrder('{{ route('external.edits.print', $request->id) }}')"
                                            class="action-btn-custom btn-print-act"
                                            title="{{ __('home.print') }}">
                                                <i class="fa fa-print"></i>
                                            </a>

                                            {{-- معاينة --}}
                                            <a href="{{ route('external.edits.show', $request->id) }}"
                                            class="action-btn-custom btn-view-act"
                                            title="{{ __('home.view_details') }}">
                                                <i class="fa fa-eye"></i>
                                            </a>

                                            @if(in_array('Admin', auth()->user()->roles_name ?? []) || in_array('Manger', auth()->user()->roles_name ?? []))

                                                {{-- تعديل (تم استخدام fa-edit لتظهر الأيقونة) --}}
                                                <a href="{{ route('external.edits.edit', $request->id) }}"
                                                class="action-btn-custom btn-edit-act"
                                                title="{{ __('home.edit') }}">
                                                    <i class="fa fa-edit"></i>
                                                </a>

                                                {{-- حذف --}}
                                                <form action="{{ route('external.edits.destroy', $request->id) }}" method="POST" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="action-btn-custom btn-delete-act btn-delete" title="{{ __('home.delete') }}">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </form>

                                                {{-- تعيين خيّاط --}}
                                                <div class="dropdown">
                                                    <button type="button" class="action-btn-custom btn-tailor-act" data-toggle="dropdown" title="تعيين خياط">
                                                        <i class="fa fa-user"></i>
                                                    </button>
                                                    <div class="dropdown-menu dropdown-menu-right dropdown-menu-custom">
                                                        <h6 class="dropdown-header text-primary font-weight-bold">اختر الخياط</h6>
                                                        @foreach($employees as $emp)
                                                            <a class="dropdown-item d-flex align-items-center justify-content-between" href="{{ route('external.edits.assignTailor', [$request->id, $emp->id]) }}">
                                                                <span><i class="fa fa-user-circle-o text-muted ml-1"></i> {{ $emp->name_ar }}</span>
                                                                @if($request->emp_id == $emp->id)
                                                                    <i class="fa fa-check text-success"></i>
                                                                @endif
                                                            </a>
                                                        @endforeach
                                                    </div>
                                                </div>

                                            @endif

                                            {{-- تغيير الحالة --}}
                                            <div class="dropdown">
                                                <button type="button" class="action-btn-custom btn-status-act" data-toggle="dropdown" title="{{ __('home.change_status') }}">
                                                    <i class="fa fa-tasks"></i>
                                                </button>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-custom">
                                                    <h6 class="dropdown-header text-muted font-weight-bold">تحديث الحالة</h6>
                                                    <a class="dropdown-item" href="{{ route('external.edits.updateStatus', [$request->id, 'pending']) }}">
                                                        <i class="fa fa-clock-o text-warning ml-1"></i> {{ __('home.pending') }}
                                                    </a>
                                                    <a class="dropdown-item" href="{{ route('external.edits.updateStatus', [$request->id, 'processing']) }}">
                                                        <i class="fa fa-refresh text-info ml-1"></i> {{ __('home.processing') }}
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                    <a class="dropdown-item text-success" href="{{ route('external.edits.updateStatus', [$request->id, 'delivered']) }}">
                                                        <i class="fa fa-check-circle ml-1"></i> {{ __('home.delivered') }}
                                                    </a>
                                                </div>
                                            </div>

                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="11" class="text-center py-5 text-muted font-weight-bold">
                                        <i class="fa fa-folder-open-o fa-2x d-block mb-2 text-muted"></i>
                                        {{ __('home.no_external_edits_found') }}
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    {{-- روابط الترقيم Pagination --}}
                    <div class="d-flex justify-content-between align-items-center mt-4 p-2 bg-light rounded">
                        <div class="font-weight-bold text-muted small">
                            عرض <strong>{{ $requests->firstItem() ?? 0 }}</strong> إلى <strong>{{ $requests->lastItem() ?? 0 }}</strong> من إجمالي <strong>{{ $requests->total() ?? 0 }}</strong> طلب
                        </div>
                        <div>
                            {{ $requests->links() }}
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function printExternalOrder(url) {
    const width = 450;
    const height = 600;
    const left = (screen.width / 2) - (width / 2);
    const top = (screen.height / 2) - (height / 2);

    window.open(url, 'PrintOrder',
        `width=${width},height=${height},top=${top},left=${left},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
    );
}
</script>
<script>
$(document).on('click', '.btn-delete', function (e) {
    e.preventDefault();
    var form = $(this).closest('form');

    Swal.fire({
        title: 'هل أنت متأكد؟',
        text: "لن تتمكن من استعادة هذا الطلب مرة أخرى!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'نعم، احذف الآن',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.isConfirmed) {
            form.submit();
        }
    });
});
</script>
@