@extends('layouts.master')

@section('css')
    <!-- Internal Select2 css -->
    <link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
    <!-- Internal Datepicker css -->
    <link href="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.css') }}" rel="stylesheet">

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

        /* كروت الصفحة */
        .invoices-main-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;
        }

        /* عناوين الأقسام الفرعية */
        .section-sub-title {
            font-size: 14px;
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 2px solid #f1f5f9;
            padding-bottom: 8px;
        }

        /* عناوين وتنسيقات الحقول */
        .filter-title-label {
            font-size: 13px;
            font-weight: 700;
            color: #334155;
            margin-bottom: 7px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .form-control-filter {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            font-size: 13.5px !important;
            font-weight: 700 !important;
            padding: 8px 12px !important;
            color: #0f172a !important;
            height: 42px !important;
            transition: all 0.2s ease;
        }

        .form-control-filter:focus {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
            background: #ffffff !important;
        }

        /* تظبيط Select2 */
        .select2-container .select2-selection--single {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            height: 42px !important;
            padding-top: 5px !important;
        }

        .select2-container .select2-selection--single .select2-selection__rendered {
            font-size: 13.5px !important;
            font-weight: 700 !important;
            color: #0f172a !important;
            line-height: 28px !important;
        }

        .select2-container .select2-selection--single .select2-selection__arrow {
            top: 8px !important;
        }
    </style>
@endsection

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

@section('page-header')
<div class="main-parent">
    <div class="breadcrumb-header justify-content-between mb-3">
        <div class="my-auto">
            <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; border-radius: 10px !important;">
                    <i class="las la-user-edit" style="font-size: 22px;"></i>
                </div>
                <div>
                    <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.updatesupplier') }}</h4>
                    <span class="text-muted tx-13 font-weight-bold">البحث عن المورد وتعديل بيانات الاتصال والموقع والحساب الضريبي</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')

@if (session()->has('addnewsupplier'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم بنجاح:</strong> {{ session()->get('addnewsupplier') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if (session()->has('updateseccess'))
    <div class="alert alert-success alert-dismissible fade show font-weight-bold shadow-sm" style="border-radius: 10px;" role="alert">
        <strong><i class="fa fa-check-circle ml-1"></i> تم التحديث:</strong> {{ session()->get('updateseccess') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

@if (count($errors) > 0)
    <div class="alert alert-danger font-weight-bold shadow-sm" style="border-radius: 10px;">
        <button aria-label="Close" class="close" data-dismiss="alert" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <strong>خطأ</strong>
        <ul class="mb-0 mt-1">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- row -->
<div class="row">
    <div class="col-lg-12 col-md-12">
        <form action="{{ url(Mcamara\LaravelLocalization\Facades\LaravelLocalization::getCurrentLocale() . '/' . ($page = 'updatesupplier')) }}"
              method="post"
              enctype="multipart/form-data"
              autocomplete="off">
            {{ csrf_field() }}

            <!-- 1. كارت اختيار المورد -->
            <div class="invoices-main-card mb-4 p-4">
                <div class="section-sub-title text-primary">
                    <i class="fa fa-search"></i> {{ __('home.shearchbysuppliername') }}
                </div>
                <div class="row">
                    <div class="col-lg-6 col-md-8 mb-2">
                        <label class="filter-title-label">
                            <i class="fa fa-truck text-primary"></i> اختر المورد لتحميل وتعديل بياناته <span class="text-danger">*</span>
                        </label>
                        <select class="form-control select2" name="clientnamesearch" id="clientnamesearch" style="width: 100% !important;" required>
                            <option value="">{{ __('home.entersuppliername') }}</option>
                            @foreach (App\Models\supllier::get() as $section)
                                <option value="{{ $section->id }}">{{ $section->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- 2. كارت تفاصيل وبيانات المورد -->
            <div class="invoices-main-card mb-4 p-4">

                <!-- أ. البيانات الأساسية للمورد -->
                <div class="section-sub-title text-primary">
                    <i class="fas fa-building"></i> البيانات الأساسية للمورد
                </div>
                <div class="row mb-4">
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-pencil text-primary"></i> {{ __('home.entersuppliername') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" id="name" name="name" required>
                    </div>

                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-phone text-success"></i> {{ __('supprocesses.phone') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter" id="phone" name="phone" onkeyup="phoneConvert()" required>
                    </div>

                    <div class="col-lg-4 col-md-12 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-envelope-o text-info"></i> {{ __('supprocesses.email') }}
                        </label>
                        <input type="email" class="form-control form-control-filter" id="email" name="email" value="Example@gmail.com">
                    </div>
                </div>

                <!-- ب. الموقع والبيانات الضريبية -->
                <div class="section-sub-title text-success">
                    <i class="fas fa-map-marked-alt"></i> الموقع والبيانات الضريبية
                </div>
                <div class="row mb-3">
                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-map-marker text-danger"></i> {{ __('supprocesses.Location') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter" id="loction" name="loction" required>
                    </div>

                    <div class="col-lg-4 col-md-6 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-id-card-o text-primary"></i> {{ __('supprocesses.TaxـNumber') }} <span class="text-danger">*</span>
                        </label>
                        <input type="text" class="form-control form-control-filter font-weight-bold" id="TaxـNumber" name="TaxـNumber" onkeyup="TaxـNumberConvert()" required>
                    </div>

                    <div class="col-lg-4 col-md-12 mb-3">
                        <label class="filter-title-label">
                            <i class="fa fa-sticky-note-o text-muted"></i> {{ __('supprocesses.product_notes') }}
                        </label>
                        <input type="text" class="form-control form-control-filter" id="notes" name="notes" placeholder="ملاحظات المورد...">
                    </div>
                </div>

                <!-- الحقول المخفية -->
                <input type="hidden" class="form-control" id="comp_name" name="comp_name" value="camp">

            </div>

            <!-- زر الحفظ والتحديث -->
            <div class="d-flex justify-content-center mb-5">
                <button type="submit" class="btn btn-primary px-5 py-2 font-weight-bold shadow-sm" style="border-radius: 9px; font-size: 15px; background: linear-gradient(135deg, #0284c7, #0369a1) !important; border: none;">
                    <i class="fa fa-check-circle ml-1"></i> {{ __('supprocesses.save_data') }}
                </button>
            </div>

        </form>
    </div>
</div>
<!-- row closed -->

@endsection

@section('js')
<!-- Internal Select2 js-->
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<!-- Internal Datepicker js -->
<script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>

<script>
    function TaxـNumberConvert() {
        var input = document.getElementById("TaxـNumber");
        if (input) {
            input.value = toEnglishNumber(input.value);
        }
    }

    function phoneConvert() {
        var input = document.getElementById("phone");
        if (input) {
            input.value = toEnglishNumber(input.value);
        }
    }

    function toEnglishNumber(strNum) {
        var ar = '٠١٢٣٤٥٦٧٨٩'.split('');
        var en = '0123456789'.split('');
        strNum = strNum.replace(/[٠١٢٣٤٥٦٧٨٩]/g, x => en[ar.indexOf(x)]);
        return strNum;
    }

    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2();
        }

        // جلب وتعبئة بيانات المورد تلقائياً عند تغييره من القائمة المنسدلة
        $('select[name="clientnamesearch"]').on('change', function() {
            var selectCustomer = $(this).val();
            if (selectCustomer && selectCustomer !== '') {
                $.ajax({
                    url: "{{ URL::to('/getsupplier') }}/" + selectCustomer,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $("#name").val(data['name'] || '');
                        $("#notes").val(data['notes'] || '');
                        $("#loction").val(data['location'] || '');
                        $("#TaxـNumber").val(data['TaxـNumber'] || '');
                        $("#email").val(data['email'] || '');
                        $("#phone").val(data['phone'] || '');
                    }
                });
            }
        });

        setTimeout(function() {
            $('.alert').fadeOut(500);
        }, 4000);
    });
</script>
@endsection