@extends('layouts.master')

@section('css')
<link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
<style>
    body, table, td, th, input, button { font-family: "Tajawal", sans-serif; }
    
    /* تنسيق الجدول البنفسجي */
    .optometry-table { width: 100%; border-collapse: collapse; border: 2px solid #4a308b; margin-top: 20px; }
    .optometry-table th, .optometry-table td { border: 1px solid #4a308b; text-align: center; vertical-align: middle; padding: 0; }
    .header-purple { background-color: #f0f0ff; color: #4a308b; font-weight: bold; padding: 10px !important; }
    
    .optometry-table input.form-control {
        border: none !important; border-radius: 0; height: 40px; text-align: center;
        background: transparent; font-weight: bold; box-shadow: none !important;
    }
    .optometry-table input:focus { background-color: #f7faff; }

    .ipd-section { background-color: #f0f0ff; padding: 10px; text-align: left; color: #4a308b; font-weight: bold; }
    .ipd-input { width: 80px; border: none; border-bottom: 2px solid #4a308b; background: transparent; outline: none; text-align: center; }

    #loading-screen {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(255, 255, 255, 0.7); display: none;
        justify-content: center; align-items: center; z-index: 9999;
    }

    /* تنسيقات خاصة بالإخفاء عند الطباعة العادية للمتصفح */
    @media print {
        .no-print, .main-header, .main-sidebar, .footer, #loading-screen, .btn {
            display: none !important;
        }
    }
</style>
@endsection
@section('title')
{{ __('home.Sizes') }}
@stop
@section('content')
<div id="loading-screen">
    <div class="spinner-border text-primary" role="status"></div>
</div>
<br>
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">
         <div class="card shadow-sm mb-4 border-light">
    <div class="card-body p-3" style="background-color: #f8f9fa; border-radius: 8px;">
        <div class="row align-items-end">
            
            {{-- زر إضافة عميل جديد --}}
            <div class="col-lg-3 col-md-4 mb-2">
                <button style="background-color: #23395D; width: 100%; height: 38px; font-weight: bold;" 
                        class="btn btn-sm text-white shadow-sm transition-btn" 
                        data-toggle="modal" 
                        href="#createcustomer">
                    <i class="fa fa-user-plus mr-1"></i> {{ __('home.addnewcustomer') }}
                </button>
            </div>

            {{-- قائمة اختيار العميل --}}
            <div class="col-lg-7 col-md-8 mb-2">
                <label class="form-label mb-1" style="font-weight: bold; color: #23395D; font-size: 13px;">
                    <i class="fa fa-search mr-1"></i> {{ __('home.chooseclient') }}
                </label>
                <select name="clientnamesearch" id="clientnamesearch" class="form-control select2 shadow-none">
                    <option value="1">عميل نقدي - CASH CUSTOMER</option>
                    {{-- سيتم تحميل باقي العملاء هنا عبر AJAX --}}
                </select>
            </div>

            {{-- أيقونة توضيحية اختيارية لبيانات النظر --}}
            <div class="col-lg-2 text-center mb-2 d-none d-lg-block">
                <div class="badge badge-pill p-2" style="background-color: #419BB2; color: white;">
                    <i class="fa fa-eye fa-lg"></i>
                </div>
            </div>

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

                <form id="optometryForm">
                    @csrf
                    <input type="hidden" name="customer_id" id="selected_customer_id" value="1">

                    <div class="table-responsive" id="printableTableArea">
                    <table class="optometry-table">
    <thead>
        <tr>
            <th rowspan="2" class="header-purple">النوع</th>
            <th colspan="3" class="header-purple">العين اليسار (OS)</th>
            <th colspan="3" class="header-purple">العين اليمين (OD)</th>
        </tr>
        <tr class="header-purple">
            <th>SPH</th> <th>CYL</th> <th>AX</th>
            <th>SPH</th> <th>CYL</th> <th>AX</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="header-purple">بعيد<br>Distance</td>
            <td><input type="text" name="l_dist_sph" class="form-control" value="0.00"></td>
            <td><input type="text" name="l_dist_cyl" class="form-control" value="0.00"></td>
            <td><input type="text" name="l_dist_ax" class="form-control" value="0"></td>
            <td><input type="text" name="r_dist_sph" class="form-control" value="0.00"></td>
            <td><input type="text" name="r_dist_cyl" class="form-control" value="0.00"></td>
            <td><input type="text" name="r_dist_ax" class="form-control" value="0"></td>
        </tr>
        <tr>
            <td class="header-purple">قريب<br>Near</td>
            <td><input type="text" name="l_near_sph" class="form-control" value="0.00"></td>
            <td><input type="text" name="l_near_cyl" class="form-control" value="0.00"></td>
            <td><input type="text" name="l_near_ax" class="form-control" value="0"></td>
            <td><input type="text" name="r_near_sph" class="form-control" value="0.00"></td>
            <td><input type="text" name="r_near_cyl" class="form-control" value="0.00"></td>
            <td><input type="text" name="r_near_ax" class="form-control" value="0"></td>
        </tr>
        <tr>
            <td colspan="4" class="ipd-section">
                IPD far: <input type="text" name="ipd_far" class="ipd-input"> <br>
                IPD near: <input type="text" name="ipd_near" class="ipd-input mg-t-10">
            </td>
            <td colspan="3" class="header-purple"></td>
        </tr>
    </tbody>
</table>
                    </div>

                    <div class="mt-4 text-center no-print">
                        <button type="submit" class="btn btn-primary px-5">حفظ وتحديث المقاسات</button>
                        <button type="button" class="btn btn-info px-5" onclick="printOptometry()">
                           <i class="fa fa-print"></i> طباعة الفحص
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


                        <input type="hidden" id="token_search" value="{{ csrf_token() }}">


<div class="modal p-3" id="createcustomer">
    <div style="margin: 0 9% !important;" class="modal-dialog modal-dialog-centered modal-special" role="document">
        <div class="modal-content modal-content-demo p-3">
            <form>
                <div class="modal-header">
                    <h6 class="modal-title"> {{ __('home.addnewcustomer') }} </h6><button aria-label="Close"
                        class="close close-special" data-dismiss="modal" type="button"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                {{ csrf_field() }}
                <div class="row mb-1">
                    <div class="col-lg-4 col-md-6 col-md-4 mb-2">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.name') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="name" name="name"
                            title="{{ __('supprocesses.name') }}" required>
                    </div>

                    <div class="col-lg-4 col-md-3 mb-2 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.phone') }}</label>
                        <input style="height:32px;" type="text" class="form-control parent-input" id="phone"
                            name="phone" onkeyup="phoneConvert()" title="{{ __('supprocesses.phone') }}">
                    </div>

                    <div class="col-lg-4 col-md-3 mb-2 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.email') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="email" name="email"
                            title="{{ __('supprocesses.email') }}" value='Example@gmail.com'>
                    </div>
                    <!-- <div class="col-lg-3 col-md-3">
                                            <label for="inputName" class="control-label parent-label"> {{ __('home.current balance') }} </label>
                                            <input type="text" class="parent-input form-control" id="balance" name="balance"
                                                title="يرجي ادخال الكمية  " value="{{ $data['customer']->Balance ?? '0' }}"
                                                >
                                        </div> -->
                </div>

                {{-- 2 --}}
                <div class="row mb-1">
                    <div class="col-lg-3 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.timeout_periodـinـdays') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input"
                            id="timeout_periodـinـdays" name="timeout_periodـinـdays"
                            title="{{ __('supprocesses.timeout_periodـinـdays') }}"
                            onkeyup="timeout_periodـinـdaysConvert()" value=30 required>
                    </div>
                    <div class="col-lg-3 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('home.tax_number') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="TaxـNumber"
                            name="TaxـNumber" value="0" title="{{ __('supprocesses.TaxـNumber') }}">
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('home.CRN') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="CRN" name="CRN"
                            onkeyup="TaxـNumberConvert() " value=0 title="{{ __('supprocesses.TaxـNumber') }}">
                    </div>
                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.credit_limit') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="credit_limit"
                            name="credit_limit" onkeyup="credit_limitConvert()"
                            title="{{ __('supprocesses.credit_limit') }}" value=10000 required>
                    </div>

                    <div class="col-lg-2 col-md-3">
                        <label style="font-size: 12px;" for="inputName" class="control-label parent-label">
                            {{ __('supprocesses.product_notes') }}</label>
                        <input style="height:32px" type="text" class="form-control parent-input" id="product_notes"
                            name="product_notes" title="{{ __('supprocesses.product_notes') }}" value='-'>
                    </div>

                </div>
                <div class="row mb-3">

                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.city') }}</label>
                        <input type="text" class="form-control parent-input" id="city" name="city"
                            title="{{ __('supprocesses.product_notes') }}" required value='-'>
                    </div>
                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.region') }}</label>
                        <input type="text" class="form-control parent-input" id="sub_city" name="sub_city"
                            title="{{ __('supprocesses.product_notes') }}" required value='-'>
                    </div>

                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.StreetName') }}</label>
                        <input type="text" class="form-control parent-input" id="StreetName" name="StreetName"
                            title="{{ __('supprocesses.product_notes') }}" required value='-'>
                    </div>
                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.plot_identification') }}</label>
                        <input type="text" class="form-control parent-input" id="plot_identification"
                            name="plot_identification" title="{{ __('supprocesses.product_notes') }}" required value=0>
                    </div>
                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.buildnumber') }}</label>
                        <input type="text" class="form-control parent-input" id="buildnumber" name="buildnumber"
                            title="{{ __('supprocesses.product_notes') }}" required value=0>
                    </div>
                    <div class="col-lg-2">
                        <label for="inputName" class="control-label parent-label">
                            {{ __('home.postcode') }}</label>
                        <input type="text" class="form-control parent-input" id="postcode" name="postcode"
                            title="{{ __('home.postcode') }}" required value=0>
                    </div>


                </div>
                <br>
                <div class="d-flex justify-content-center">
                    <button style="background-color: #419BB2" class="btn btn-primary p-1" data-dismiss="modal"
                        onclick="createnewcustomerajax()">
                        {{ __('supprocesses.save_data') }}
                        <svg style="width: 20px" class="svg-icon-buttons" viewBox="0 0 20 20">
                            <path fill="none"
                                d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z">
                            </path>
                        </svg>
                    </button>
                </div>
        </div>

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



@endsection

@section('js')
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>

function createnewcustomerajax() {


    console.log('+++++++++++++++++++++++++++++++++create customer ++++++++++++++++++++++++++++++++');
    var url = " {{ URL::to('createnewcustomerajax') }}";

    var token_search = $("#token_search").val();
    if ($('#name').val() == '') {
        alert("{{ __('home.enterclienname') }}")
    } else if ($('#buildnumber').val() == '') {
        alert("{{ __('home.buildnumber') }}")
    } else if ($('#plot_identification').val() == '') {
        alert("{{ __('home.plot_identification') }}")
    } else if ($('#postcode').val() == '') {
        alert("{{ __('home.postcode') }}")
    } else if ($('#StreetName').val() == '') {
        alert("{{ __('home.StreetName') }}")
    } else if ($('#city').val() == '') {
        alert("{{ __('home.city') }}")
    } else if ($('#sub_city').val() == '') {
        alert("{{ __('home.sub_city') }}")
    } else if ($('#TaxـNumber').val().length < 1) {
        alert('يجب ان يكون رقم الضريبي مكون من 15 رقم     \n    The tax number must consist of 15 digits')
    } else {

        $('#createcustomer').modal().hide();

        $.ajax({
            url: url,
            type: 'post',
            cache: false,

            data: {
                _token: token_search,
                name: $('#name').val(),
                tax_no: $('#TaxـNumber').val(),
                Balance: 0,
                city: $('#city').val() ?? "client address",
                phone: $('#phone').val(),
                email: $('#email').val(),
                notes: $('#product_notes').val(),
                Limit_credit: $('#credit_limit').val(),
                grace_period_in_days: $('#timeout_periodـinـdays').val(),
                buildnumber: $('#buildnumber').val(),
                plot_identification: $('#plot_identification').val(),
                StreetName: $('#StreetName').val(),
                sub_city: $('#sub_city').val(),
                postcode: $('#postcode').val(),
                CRN: $('#CRN').val(),
            },


            success: function(data) {
                $('#phone').val('');
                $('#TaxـNumber').val('');
                $('#name').val('')
             
                $('#clientnamesearch').append($('<option >', {
                    value: data['id'],
                    text: data['name'] + data['tax_no']
                }));
                
                $('#clientnamesearch').val(data['id']).change();

Swal.fire({
        icon: 'success',
        title: '<div style="direction: rtl;">تم إنشاء العميل بنجاح <br> <span style="font-size: 14px; color: #888;">Customer Created Successfully</span></div>',
        confirmButtonText: 'حسناً / OK',
        confirmButtonColor: '#419BB2',
        timer: 2500,
        timerProgressBar: true
    });
            },
            error: function(response) {
                console.log(response)
                alert("{{ __('home.sorryerror') }}")

            }
        });







    }



}


$(document).ready(function() {
    let searchText = '';

    $('#clientnamesearch').select2({
        placeholder: 'ابحث عن عميل',
        allowClear: true,
        minimumInputLength: 2,
        ajax: {
            url: "{{ route('clientnamesearch.search') }}",
            dataType: 'json',
            delay: 300,
            data: function (params) {
                searchText = params.term;
                return { q: params.term };
            },
            processResults: function (data) {
                if (!data || data.length === 0) {
                    $('#name').val(searchText);
                    $('#clientnamesearch').select2('close');
                    $('#createcustomer').modal('show');
                    return { results: [] };
                }
                return {
                    results: data.map(item => ({
                        id: item.id,
                        text: item.name + ' :-' + (item.tax_no || '')
                    }))
                };
            }
        }
    });

    $('#clientnamesearch').on('select2:select', function (e) {
        let customerId = e.params.data.id;
        $('#selected_customer_id').val(customerId);

        $('#loading-screen').css('display', 'flex');
console.log("{{ url('get-customer-sizes') }}/" + customerId,)
        $.ajax({
            url: "{{ url('get-customer-sizes') }}/" + customerId,
            type: "GET",
            success: function (data) {
                $('#loading-screen').hide();
                if (data && data.r_dist_sph !== undefined) {
                    
                    fillTable(data);
                    Swal.fire({
        icon: 'success',
        title: '<div style="direction: rtl; font-family: sans-serif;">تم جلب مقاسات العميل بنجاح</div>',
        html: '<span style="color: #666; font-size: 15px;">Customer prescription retrieved successfully</span>',
        confirmButtonText: 'حسناً / OK',
        confirmButtonColor: '#419BB2', // اللون المتناسق مع واجهة نظامك
        timer: 2500,
        timerProgressBar: true
    });
                } else {
                    resetTable();
                }
            },
            error: function () {
                $('#loading-screen').hide();
                resetTable();
            }
        });
    });

$('#optometryForm').on('submit', function(e) {
    e.preventDefault();
    $('#loading-screen').css('display', 'flex');

    $.ajax({
        url: "{{ route('sizes.store') }}",
        type: "POST",
        data: $(this).serialize(),
        success: function(response) {
            $('#loading-screen').hide();
            
            // رسالة النجاح - عربي وإنجليزي
            Swal.fire({
                icon: 'success',
                title: '<div style="direction: rtl;">تم حفظ المقاسات بنجاح <br> <span style="font-size: 14px; color: #888;">Prescription saved successfully</span></div>',
                confirmButtonText: 'حسناً / OK',
                confirmButtonColor: '#3085d6',
                timer: 3000,
                timerProgressBar: true
            });
        },
        error: function(xhr) {
            $('#loading-screen').hide();
            
            // رسالة الخطأ - عربي وإنجليزي
            Swal.fire({
                icon: 'error',
                title: '<div style="direction: rtl;">عفواً، حدث خطأ! <br> <span style="font-size: 14px; color: #888;">Oops, an error occurred!</span></div>',
                text: 'يرجى المحاولة مرة أخرى | Please try again',
                confirmButtonText: 'إغلاق / Close',
                confirmButtonColor: '#d33'
            });
        }
    });
});
    function fillTable(data) {
        $('input[name="r_dist_sph"]').val(data.r_dist_sph);
        $('input[name="r_dist_cyl"]').val(data.r_dist_cyl);
        $('input[name="r_dist_ax"]').val(data.r_dist_ax);
        $('input[name="l_dist_sph"]').val(data.l_dist_sph);
        $('input[name="l_dist_cyl"]').val(data.l_dist_cyl);
        $('input[name="l_dist_ax"]').val(data.l_dist_ax);
        $('input[name="r_near_sph"]').val(data.r_near_sph);
        $('input[name="r_near_cyl"]').val(data.r_near_cyl);
        $('input[name="r_near_ax"]').val(data.r_near_ax);
        $('input[name="l_near_sph"]').val(data.l_near_sph);
        $('input[name="l_near_cyl"]').val(data.l_near_cyl);
        $('input[name="l_near_ax"]').val(data.l_near_ax);
        $('input[name="ipd_far"]').val(data.ipd_far);
        $('input[name="ipd_near"]').val(data.ipd_near);
    }

    function resetTable() {
        $('#optometryForm input[type="text"]').val('0.00');
        $('input[name*="_ax"]').val('0');
        $('input[name^="ipd"]').val('');
    }
});

// دالة الطباعة المخصصة
function printOptometry() {
    var clientName = $('#clientnamesearch option:selected').text();
    var printWindow = window.open('', '', 'height=800,width=1000');
    
    printWindow.document.write('<html><head><title>طباعة فحص نظر</title>');
    printWindow.document.write('<style>');
    printWindow.document.write(`
        body { direction: rtl; font-family: "Tajawal", sans-serif; padding: 30px; }
        .print-header { text-align: center; margin-bottom: 20px; border-bottom: 3px solid #4a308b; padding-bottom: 10px; }
        .optometry-table { width: 100%; border-collapse: collapse; border: 2px solid #4a308b; }
        .optometry-table th, .optometry-table td { border: 1px solid #4a308b; text-align: center; padding: 10px; }
        .header-purple { background-color: #f0f0ff !important; color: #4a308b; font-weight: bold; }
        .ipd-section { background-color: #f0f0ff; font-weight: bold; text-align: right; padding: 10px; }
        .client-info { font-size: 18px; margin-bottom: 15px; color: #4a308b; font-weight: bold; }
    `);
    printWindow.document.write('</style></head><body>');

    printWindow.document.write('<div class="print-header"><h1>تقرير مقاسات فحص النظر</h1></div>');
    printWindow.document.write('<div class="client-info">اسم العميل: ' + clientName + '</div>');

    // نسخ الجدول وتحويل القيم لنصوص ثابتة للطباعة
    var tableHtml = $('.optometry-table').clone();
    tableHtml.find('input').each(function() {
        var val = $(this).val();
        $(this).replaceWith('<span style="font-weight:bold;">' + (val ? val : '-') + '</span>');
    });

    printWindow.document.write(tableHtml[0].outerHTML);
    printWindow.document.write('<div style="margin-top: 40px; text-align: left; padding-left: 50px;">توقيع الفاحص: ............................</div>');
    printWindow.document.write('</body></html>');

    printWindow.document.close();
    
    setTimeout(function() {
        printWindow.focus();
        printWindow.print();
        printWindow.close();
    }, 500);
}
</script>
@endsection