@extends('layouts.master')
@section('css')
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Internal Data table css -->


<!-- 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>
    /* منع قص القائمة داخل الجدول */
    .table-responsive, .card-body {
        overflow: visible !important;
    }

    /* تنسيق القائمة والسكرول بار */
    .tailor-dropdown {
        min-width: 200px;
        max-height: 250px; /* زيادة الطول قليلاً */
        overflow-y: auto !important;
        z-index: 1050; /* التأكد من ظهورها فوق أزرار الصفوف الأخرى */
        border: 1px solid #ddd;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    /* تحسين شكل السكرول بار ليكون واضحاً */
    .tailor-dropdown::-webkit-scrollbar {
        width: 6px;
    }
    .tailor-dropdown::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    .tailor-dropdown::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    .tailor-dropdown::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* ضبط اتجاه علامة الصح */
    .check-mark {
        float: left;
        margin-top: 5px;
    }
</style>

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


@section('content')
    <div class="page-title">
        <div class="row mt-5">
            <div class="col-sm-6">
                <h4 class="mb-0">{{ __('home.external_edits_record') }}</h4>
            </div>
        <div class="col-sm-6 text-left">
        {{-- لاحظ استخدام text-left لجعل الزرار يذهب لليسار في واجهة العربي --}}
        <a href="{{ route('external.edits.create') }}" class="btn btn-primary font-weight-bold shadow-sm">
            <i class="fa fa-plus"></i> {{ __('home.add_new_external_edit') }}
        </a>
    </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="card card-statistics h-100">
                <div class="card-body">

                    <div class="alert alert-danger-gradient mb-3">
                        <strong style="font-size: 16px;">{{ __('home.total_uncollected_external_debts') }}: </strong>
                        <span class="h5 mb-0">{{ number_format($totalRemaining, 2) }} {{ __('home.currency_sar') }}</span>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-bordered table-hover text-center">
                            <thead class="bg-primary text-white">
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('home.order_number') }}</th>
                                    <th>{{ __('home.customer') }}</th>
                                    <th>{{ __('home.branch') }}</th>
                                    <th>{{ __('home.tailor') }}</th>
                                    <th>{{ __('home.total') }}</th>
                                    <th>{{ __('home.paid') }}</th>
                                    <th>{{ __('home.remaining') }}</th>
                                    <th>{{ __('home.status') }}</th>
                                    <th>{{ __('home.delivery_date') }}</th>
                                    <th>{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($requests as $request)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td class="font-weight-bold text-info">#{{ $request->id }}</td>
                                        <td>
                                            <span class="d-block font-weight-bold">{{ $request->customer->name }}</span>
                                            <small class="text-muted"><i class="fa fa-phone"></i> {{ $request->customer->phone }}</small>
                                        </td>
                                        <td>{{ $request->branch->name ?? '---' }}</td>
                                       <td>
                                        @if($request->tailor)
                                            <span class="badge badge-primary">
                                                <i class="fa fa-user"></i> {{ $request->tailor->name_ar }}
                                            </span>
                                        @else
                                            <span class="text-muted small">لم يحدد</span>
                                        @endif
                                    </td>
                                        <td>{{ number_format($request->total_amount, 2) }}</td>
                                        <td class="text-success">{{ number_format($request->paid_amount, 2) }}</td>
                                        <td class="text-danger font-weight-bold">
                                            {{ number_format($request->remaining_amount, 2) }}
                                        </td>
                                 <td>
                                    @if($request->status == 'pending')
                                        <span class="badge badge-warning">{{ __('home.pending') }}</span>
                                    @elseif($request->status == 'processing')
                                        <span class="badge badge-info">{{ __('home.processing') }}</span>
                                    @elseif($request->status == 'delivered')
                                        <span class="badge badge-success">{{ __('home.delivered') }}</span>
                                    @else
                                        <span class="badge badge-success">{{ $request->status }}</span>
                                    @endif
                                </td>
                                        <td>{{ $request->delivery_date ? $request->delivery_date->format('Y-m-d') : '---' }}</td>
                                   <td>
                                        <div class="btn-group" style="gap: 8px;">
                                            <a href="javascript:void(0);"
                                            onclick="printExternalOrder('{{ route('external.edits.print', $request->id) }}')"
                                            class="btn btn-sm btn-outline-info"
                                            title="{{ __('home.print') }}">
                                                <i class="fa fa-print"></i>
                                            </a>

                                            <a href="{{ route('external.edits.show', $request->id) }}" class="btn btn-sm btn-outline-secondary" 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 ?? []))


                                            <a href="{{ route('external.edits.edit', $request->id) }}" class="btn btn-sm btn-outline-success" title="{{ __('home.edit') }}">
                                                    <i class="fa fa-edit"></i>
                                                </a>

                                                <form action="{{ route('external.edits.destroy', $request->id) }}" method="POST" style="display:inline-block;" class="delete-form">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-sm btn-outline-danger btn-delete" title="{{ __('home.delete') }}">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </form>

                                                {{-- زرار تعيين خياط --}}
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-toggle="dropdown" title="تعيين خياط">
                                                    <i class="fa fa-user text-muted"></i> </button>
                                                <div class="dropdown-menu dropdown-menu-right" style="max-height: 200px; overflow-y: auto;">
                                                    <h6 class="dropdown-header">اختر الخياط</h6>
                                                    @foreach($employees as $emp)
                                                        <a class="dropdown-item" href="{{ route('external.edits.assignTailor', [$request->id, $emp->id]) }}">
                                                            <i class="fa fa-user text-muted"></i> {{ $emp->name_ar }}
                                                            @if($request->emp_id == $emp->id)
                                                                <i class="fa fa-check text-success float-left"></i>
                                                            @endif
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                                @endif
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-outline-warning dropdown-toggle" data-toggle="dropdown" title="{{ __('home.change_status') }}">
                                                    <i class="fa fa-tasks"></i>
                                                </button>
                                              <div class="dropdown-menu dropdown-menu-right">
                                                    {{-- قيد الانتظار --}}
                                                    <a class="dropdown-item" href="{{ route('external.edits.updateStatus', [$request->id, 'pending']) }}">
                                                        <i class="fa fa-clock text-warning"></i> {{ __('home.pending') }}
                                                    </a>

                                                    {{-- تحت التنفيذ --}}
                                                    <a class="dropdown-item" href="{{ route('external.edits.updateStatus', [$request->id, 'processing']) }}">
                                                        <i class="fa fa-spinner fa-spin text-info"></i> {{ __('home.processing') }}
                                                    </a>
                                                    <div class="dropdown-divider"></div>

                                                    {{-- تم التسليم --}}
                                                    <a class="dropdown-item" href="{{ route('external.edits.updateStatus', [$request->id, 'delivered']) }}">
                                                        <i class="fa fa-handshake text-success"></i> {{ __('home.delivered') }}
                                                    </a>
                                                </div>
                                            </div>


                                        </div>
                                    </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="10" class="text-center text-muted">{{ __('home.no_external_edits_found') }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="d-flex justify-content-center mt-3">
                        {{ $requests->links() }}
                    </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>

@endsection