@extends('layouts.master')
@section('css')
<link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<style>
    :root {
        --sp-primary: #1e293b;
        --sp-accent: #419BB2;
        --sp-bg: #f8fafc;
        --sp-surface: #ffffff;
        --sp-border: #e2e8f0;
        --sp-text: #0f172a;
        --sp-radius: 10px;
        --sp-radius-sm: 8px;
    }
    body {
        background-color: var(--sp-bg) !important;
    }
    .custom-card {
        background: var(--sp-surface);
        border-radius: var(--sp-radius);
        border: 1px solid var(--sp-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        overflow: hidden;
    }
    .custom-card-header {
        background: #ffffff;
        padding: 16px 22px;
        border-bottom: 1px solid var(--sp-border);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .custom-card-title {
        color: var(--sp-primary);
        font-weight: 700;
        font-size: 16px;
        margin: 0;
    }
    .form-label-custom {
        color: var(--sp-primary);
        font-weight: 600;
        font-size: 13.5px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .form-label-custom i {
        color: var(--sp-accent);
    }
    .card-body select.form-control,
    .card-body input.form-control {
        border-radius: var(--sp-radius-sm) !important;
        border: 1px solid #cbd5e1 !important;
        height: 44px;
        font-weight: 600;
        padding: 8px 14px;
        color: #1e293b;
        transition: all 0.2s ease;
    }
    .card-body select.form-control:focus,
    .card-body input.form-control:focus {
        border-color: var(--sp-accent) !important;
        box-shadow: 0 0 0 3px rgba(65, 155, 178, 0.18) !important;
        outline: none;
    }
    .section-divider {
        border-top: 1px dashed var(--sp-border);
        margin: 26px 0;
    }
    /* زر اختيار منتج */
    .btn-choose-product {
        background: #fff8ec;
        border: 1.5px dashed #f0a92e;
        color: #b8760a;
        font-weight: 700;
        border-radius: var(--sp-radius-sm);
        padding: 12px 28px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s ease;
    }
    .btn-choose-product:hover:not(.disabled) {
        background: #fdeecb;
        color: #915c05;
    }
    .btn-choose-product.disabled {
        opacity: .5;
        pointer-events: none;
        cursor: not-allowed;
    }
    /* تنسيق الجدول الاحترافي */
    .table-professional {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        margin-top: 4px;
    }
    .table-professional thead th {
        background-color: var(--sp-primary) !important;
        color: #ffffff !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 12px 8px !important;
        border: none !important;
        text-align: center;
    }
    .table-professional tbody td {
        padding: 12px 10px;
        border-top: 1px solid var(--sp-border);
        vertical-align: middle;
        text-align: center;
        color: #334155;
        font-weight: 600;
        background: #fff;
    }
    .table-professional tbody tr:hover td {
        background-color: #f7fbfc;
    }
    .btn-remove {
        color: #dc3545;
        background: #fff5f5;
        border: 1px solid #ffc9c9;
        border-radius: 6px;
        padding: 6px 12px;
        cursor: pointer;
    }
    .btn-remove:hover {
        background: #dc3545;
        color: #fff;
    }
    .empty-products-hint {
        text-align: center;
        color: #94a3b8;
        font-weight: 600;
        font-size: 13px;
        padding: 18px 0;
    }
    /* أزرار الحفظ */
    .btn-action-save {
        background-color: var(--sp-primary);
        border-color: var(--sp-primary);
        color: #fff !important;
        font-weight: 700;
        border-radius: var(--sp-radius-sm);
        padding: 11px 34px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-action-save:hover {
        background-color: #0f172a;
    }
    .btn-action-draft {
        background-color: #ffffff;
        border: 1.5px solid #cbd5e1;
        color: #475569 !important;
        font-weight: 700;
        border-radius: var(--sp-radius-sm);
        padding: 11px 30px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .btn-action-draft:hover {
        background-color: #f1f5f9;
    }
    .btn-print-action {
        background-color: var(--sp-accent);
        border-color: var(--sp-accent);
        color: #ffffff !important;
        font-weight: 700;
        border-radius: var(--sp-radius-sm);
        padding: 10px 30px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none !important;
    }
    .btn-print-action:hover {
        background-color: #358296;
        color: #fff !important;
    }
    .alert {
        border-radius: 8px !important;
        border: none !important;
        font-weight: 600 !important;
    }
</style>
@endsection
@section('title') {{__('home.send_product_from_other_branch_other')}} @stop
@section('page-header')
<br>
@endsection
@section('content')
{{-- عرض أخطاء التحقق إن وجدت --}}
@if ($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif
@if (session()->has('productupdatedlocation'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    <strong>{{ session()->get('productupdatedlocation') }}</strong>
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif
<div class="row">
    <div class="col-xl-12">
        <div class="custom-card">
            <div class="custom-card-header">
                <i class="las la-exchange-alt tx-20 text-primary"></i>
                <h5 class="custom-card-title">{{__('home.send_product_from_other_branch_other')}}</h5>
            </div>
            <div class="card-body p-4 p-md-5">
                <form id="movementForm"
                    action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale().'/create_sendProduct') }}"
                    method="POST">
                    {{ csrf_field() }}
                    {{-- إذا كنا نقوم بتعديل مسودة مسترجعة، نرسل الـ ID الخاص بها --}}
                    @if(isset($draftMovement))
                    <input type="hidden" name="draft_id" value="{{ $draftMovement->id }}">
                    @endif
                    {{-- حقل مخفي لتحديد حالة الإرسال (مسودة draft أو مكتملة completed) --}}
                    <input type="hidden" name="status" id="movement_status" value="completed">

                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-3">
                            <label class="form-label-custom"><i class="las la-store-alt"></i>
                                {{ __('home.choosebranch_sender') ?? 'اختر الفرع المرسل' }} <span class="text-danger">*</span></label>
                            <select name="branch_from" id="branch_from_id" onchange="onBranchFromChange()"
                                class="form-control select2" required style="width:100%;">
                                <option value="">{{ __('home.Select_Sending_Branch') ?? 'اختر الفرع المرسل' }}
                                </option>
                                @foreach (App\Models\branchs::get() as $section)
                                <option value="{{ $section->id }}"
                                    {{ (isset($draftMovement) ? $draftMovement->branch_from == $section->id : $branchId == $section->id) ? 'selected' : '' }}>
                                    {{ $section->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4 col-md-6 mb-3">
                            <label class="form-label-custom"><i class="las la-warehouse"></i>
                                {{ __('home.choosebranch_reciver') }} <span class="text-danger">*</span></label>
                            <select name="branch" id="branchs_id" onchange="onBranchToChange()"
                                class="form-control select2" style="width:100%;">
                                <option value="">{{ __('home.Select_Receiving_Branch') }}</option>
                                @foreach (App\Models\branchs::get() as $section)
                                <option value="{{ $section->id }}"
                                    {{ isset($draftMovement) && $draftMovement->branch_to == $section->id ? 'selected' : '' }}>
                                    {{ $section->name }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4 col-md-6 mb-3">
                            <label class="form-label-custom"><i class="las la-user-tag"></i>
                                {{ __('home.chooseemployeereciver') }}</label>
                            <select name="employeereciver" id="employeereciver" class="form-control select2"
                                style="width:100%;">
                                <option value="">{{ __('home.choose_employee_placeholder') ?? 'اختر الموظف المستلم' }}
                                </option>
                                {{-- إذا كانت مسودة قادمة، نضع الموظف المخزن كخيار افتراضي لحين تحديثه بالـ Ajax --}}
                                @if(isset($draftMovement))
                                @php $savedUser = \App\Models\User::find($draftMovement->user_to); @endphp
                                @if($savedUser)
                                <option value="{{ $savedUser->id }}" selected>{{ $savedUser->name }}</option>
                                @endif
                                @endif
                            </select>
                        </div>
                    </div>

                    <div class="section-divider"></div>

                    <div class="d-flex justify-content-center mb-4">
                        <a class="btn-choose-product" id="chooseProductBtn" href="javascript:void(0)"
                            onclick="openProductSearchModal()">
                            <i class="las la-plus-circle tx-18"></i> {{ __('home.chooose product') }}
                        </a>
                    </div>

                    <div class="table-responsive">
                        <table class="table-professional">
                            <thead>
                                <tr>
                                    <th style="width:5%">#</th>
                                    <th>{{ __('home.product') }}</th>
                                    <th style="width:15%">{{ __('home.quantity') }}</th>
                                    <th style="width:20%">{{ __('home.thecostProduct') }}</th>
                                    <th style="width:12%">{{ __('home.operations') }}</th>
                                </tr>
                            </thead>
                            <tbody id="products_body">
                                {{-- استرجاع وعرض منتجات المسودة تلقائياً إن وجدت --}}
                                @if(isset($draftItems) && count($draftItems) > 0)
                                @foreach($draftItems as $item)
                                <tr>
                                    <td>#</td>
                                    <td>
                                        {{ $item->product->product_name ?? $item->product->name ?? 'منتج غير معروف' }}
                                        <input type="hidden" name="products[]" value="{{ $item->product_id }}">
                                    </td>
                                    <td>
                                        <input type="number" min="0.01" step="any" name="quantities[]"
                                            class="form-control" value="{{ $item->quantity }}"
                                            style="width:100px; margin:auto; height:38px;">
                                    </td>
                                    <td>
                                        {{ $item->cost_per_each_withoud_tax }}
                                        <input type="hidden" name="prices[]"
                                            value="{{ $item->cost_per_each_withoud_tax }}">
                                    </td>
                                    <td>
                                        <button type="button" class="btn-remove remove-row"><i
                                                class="las la-trash"></i></button>
                                    </td>
                                </tr>
                                @endforeach
                                @endif
                            </tbody>
                        </table>
                        <div class="empty-products-hint" id="emptyProductsHint"
                            @if(isset($draftItems) && count($draftItems) > 0) style="display:none" @endif>
                            <i class="las la-box-open tx-22"></i><br>
                            {{ __('home.no_products_selected_yet') ?? 'لسه معملتش اختيار أي منتج، اضغط "اختيار منتج" فوق' }}
                        </div>
                    </div>

                    <div class="d-flex justify-content-center align-items-center mt-5" style="gap: 12px;">
                        <button type="button" id="draftBtn" class="btn-action-draft"
                            onclick="submitMovementForm('draft')">
                            <i class="las la-file-alt tx-16"></i> {{ __('home.Save_As_Draft') }}
                        </button>
                        <button type="button" id="submitBtn" class="btn-action-save"
                            onclick="submitMovementForm('completed')">
                            <i class="las la-save tx-16"></i> {{ __('home.save_data') }}
                        </button>
                    </div>
                </form>

                {{-- زر الطباعة (يظهر فقط إذا كان هناك رقم فاتورة $data) --}}
                @if(session()->has('saved_movement_id') || (isset($data) && !empty($data)))
                @php
                $invoiceId = session()->get('saved_movement_id') ?? $data;
                @endphp
                <div class="d-flex justify-content-center mt-4">
                    <form
                        action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() .'/print_Transfer_items') }}"
                        method="POST" target="_blank" class="m-0">
                        {{ csrf_field() }}
                        <input type="number" name="sprint_invoice_number" value="{{ $invoiceId }}" hidden>
                        <button type="submit" class="btn-print-action">
                            <i class="las la-print tx-18"></i> {{ __('home.print') }}
                        </button>
                    </form>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="SearchProduct" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content" style="border-radius: 12px; overflow:hidden;">
            <div class="modal-body p-4">
                <input type="text" class="form-control mb-3" placeholder="{{ __('home.searchaboutproduct') }}"
                    id="searchaboutproduct" onkeyup="searchaboutproductfunction()"
                    style="height:44px;border-radius:8px;">
                <div id="ajax_responce_serarchDiv"></div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
    var date = $('.fc-datepicker').datepicker && $('.fc-datepicker').datepicker({
        dateFormat: 'yy-mm-dd'
    });
    // نصوص مشتركة للترجمة
    let txtSelectSendingBranchFirst = "{{ __('home.Select_Sending_Branch_First') ?? 'من فضلك اختر الفرع المرسل أولاً' }}";

    function getEmployeesByBranch() {
        let branchId = $('#branchs_id').val();
        let employeeSelect = $('#employeereciver');
        let currentSavedUser = "{{ isset($draftMovement) ? $draftMovement->user_to : '' }}";
        // نصوص الترجمة الخاصة بالـ AJAX
        let txtLoading = "{{ __('home.Loading_Employees') }}";
        let txtSelect = "{{ __('home.Select_Receiving_Employee') }}";
        let txtError = "{{ __('home.Error_Loading_Data') }}";
        let txtSelectBranchFirst = "{{ __('home.Select_Branch_First') }}";
        employeeSelect.empty();
        employeeSelect.append('<option value="">' + txtLoading + '</option>').trigger('change');
        if (branchId) {
            $.ajax({
                url: "{{ URL::to('get-branch-employees') }}/" + branchId,
                type: "GET",
                dataType: "json",
                success: function(data) {
                    employeeSelect.empty();
                    employeeSelect.append('<option value="">' + txtSelect + '</option>');
                    $.each(data, function(key, value) {
                        let isSelected = (currentSavedUser == value.id) ? 'selected' : '';
                        employeeSelect.append('<option value="' + value.id + '" ' + isSelected + '>' +
                            value.name + '</option>');
                    });
                    employeeSelect.trigger('change');
                },
                error: function() {
                    employeeSelect.empty();
                    employeeSelect.append('<option value="">' + txtError + '</option>').trigger('change');
                }
            });
        } else {
            employeeSelect.empty();
            employeeSelect.append('<option value="">' + txtSelectBranchFirst + '</option>').trigger('change');
        }
    }

    // يمنع اختيار نفس الفرع مرسل ومستقبل في نفس الوقت
    function syncBranchOptions() {
        let from = $('#branch_from_id').val();
        let to = $('#branchs_id').val();
        $('#branch_from_id option').prop('disabled', false);
        $('#branchs_id option').prop('disabled', false);
        if (to) {
            $('#branch_from_id option[value="' + to + '"]').prop('disabled', true);
        }
        if (from) {
            $('#branchs_id option[value="' + from + '"]').prop('disabled', true);
        }
        toggleChooseProductButton();
    }

    // عند تغيير الفرع المرسل: المنتجات المختارة كانت من مخزون فرع تاني فمحتاجين نفضّي الجدول
    function onBranchFromChange() {
        let rows = $('#products_body tr').length;
        if (rows > 0) {
            if (confirm("{{ __('home.changing_sender_branch_clears_products') ?? 'تغيير الفرع المرسل هيمسح المنتجات المختارة حالياً، تكمل؟' }}")) {
                $('#products_body').empty();
                $('#emptyProductsHint').show();
            }
        }
        syncBranchOptions();
    }

    function onBranchToChange() {
        syncBranchOptions();
        getEmployeesByBranch();
    }

    function toggleChooseProductButton() {
        let branchFrom = $('#branch_from_id').val();
        if (branchFrom) {
            $('#chooseProductBtn').removeClass('disabled');
        } else {
            $('#chooseProductBtn').addClass('disabled');
        }
    }

    function openProductSearchModal() {
        if (!$('#branch_from_id').val()) {
            alert(txtSelectSendingBranchFirst);
            return;
        }
        $('#SearchProduct').modal('show');
    }

    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2();
        }
        // جلب الـ draft_id من رابط المتصفح العلوي إن وجد
        let urlParams = new URLSearchParams(window.location.search);
        let draftId = urlParams.get('draft_id');
        if (draftId) {
            if ($('input[name="draft_id"]').length === 0) {
                $('#movementForm').prepend('<input type="hidden" name="draft_id" value="' + draftId + '">');
            } else {
                $('input[name="draft_id"]').val(draftId);
            }
            let cleanUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
            window.history.replaceState({
                path: cleanUrl
            }, '', cleanUrl);
        }
        if ($('#branchs_id').val()) {
            getEmployeesByBranch();
        }
        syncBranchOptions();
    });

    function submitMovementForm(status) {
        let txtSelectProduct = "{{ __('home.Please_Select_At_Least_One_Product') }}";
        let txtSavingDraft = "{{ __('home.Saving_Draft') }}";
        let txtSavingFinal = "{{ __('home.Saving_Final') }}";
        if (!$('#branch_from_id').val()) {
            alert(txtSelectSendingBranchFirst);
            return;
        }
        if ($('#products_body tr').length === 0) {
            alert(txtSelectProduct);
            return;
        }
        $('#movement_status').val(status);
        $('#submitBtn').prop('disabled', true);
        $('#draftBtn').prop('disabled', true);
        if (status === 'draft') {
            $('#draftBtn').html('<i class="fa fa-spinner fa-spin"></i> ' + txtSavingDraft);
        } else {
            $('#submitBtn').html('<i class="fa fa-spinner fa-spin"></i> ' + txtSavingFinal);
        }
        $('#movementForm').submit();
    }
    $('#SearchProduct').on('show.bs.modal', function() {
        $('#searchaboutproduct').val('');
        searchaboutproductfunction();
    });
    function searchaboutproductfunction() {
        let searchtext = $('#searchaboutproduct').val();
        let branch_from = $('#branch_from_id').val();
        if (!branch_from) {
            alert(txtSelectSendingBranchFirst);
            $('#SearchProduct').modal('hide');
            return;
        }
        if (searchtext.trim() == '') {
            searchtext = "1";
        }
        $.ajax({
            url: "{{ URL::to('searchChooseProductpaginatenew') }}/" + searchtext + "/" + branch_from,
            type: 'get',
            success: function(data) {
                $("#ajax_responce_serarchDiv").html(data);
            }
        });
    }
    function chooseProduct(id, name, sale_price) {
        if ($(`input[value="${id}"][name="products[]"]`).length > 0) {
            alert('المنتج مضاف بالفعل في الجدول');
            return;
        }
        $('#emptyProductsHint').hide();
        let row = `<tr>
                <td>#</td>
                <td>${name}<input type="hidden" name="products[]" value="${id}"></td>
                <td><input type="number" min="0.01" step="any" name="quantities[]" class="form-control" value="1" style="width:100px; margin:auto; height:38px;"></td>
                <td>${sale_price}<input type="hidden" name="prices[]" value="${sale_price}"></td>
                <td><button type="button" class="btn-remove remove-row"><i class="las la-trash"></i></button></td>
            </tr>`;
        $('#products_body').append(row);
        $('#SearchProduct').modal('hide');
    }
    $(document).on('click', '.remove-row', function() {
        $(this).closest('tr').remove();
        if ($('#products_body tr').length === 0) {
            $('#emptyProductsHint').show();
        }
    });
</script>
@endsection