@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="row mb-4">
                    <div class="col-lg-5">
                        <label class="form-label">{{ __('home.chooseclient') }}</label>
                        <select name="clientnamesearch" id="clientnamesearch" class="form-control select2">
                            <option value="1">عميل نقدي CASH CUSTOMER</option>
                        </select>
                    </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">العين اليمين (OD)</th>
                                    <th colspan="3" class="header-purple">العين اليسار (OS)</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="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>
                                    <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>
                                </tr>
                                <tr>
                                    <td class="header-purple">قريب<br>Near</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>
                                    <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>
                                </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">
                                        <br>  
                                    </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>
@endsection

@section('js')
<script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>

<script>
$(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');

        $.ajax({
            url: "{{ url('get-customer-sizes') }}/" + customerId,
            type: "GET",
            success: function (data) {
                $('#loading-screen').hide();
                if (data && data.r_dist_sph !== undefined) {
                    fillTable(data);
                } 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();
                alert(response.message);
            },
            error: function() {
                $('#loading-screen').hide();
                alert('خطأ في الاتصال بالسيرفر');
            }
        });
    });

    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