@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-grey { background-color: #f2f2f2; color: #333; font-weight: bold; padding: 10px !important; }
    
    .optometry-table input.form-control {
        border: none !important; border-radius: 0; height: 45px; text-align: center;
        background: transparent; font-weight: bold; box-shadow: none !important; width: 100%;
        font-size: 16px;
    }

    .ipd-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; }
    .ipd-item { display: flex; align-items: center; width: 100%; }
    .ipd-input { width: 80px; border: none; border-bottom: 2px solid #4a308b; background: transparent; outline: none; text-align: center; margin-left: 10px; font-weight: bold; }
    .ipd-label { font-weight: bold; color: #4a308b; white-space: nowrap; }

    #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;
    }
    .no-border { border: none !important; }
    @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>

<div class="row mt-4">
    <div class="col-xl-12">
        <div class="card shadow-sm">
            <div class="card-body">
                
                <div class="card bg-light mb-4 border-light shadow-sm">
                    <div class="card-body p-3">
                        <div class="row align-items-end">
                            <div class="col-lg-3 col-md-4 mb-2">
                                <button style="background-color: #23395D;" class="btn btn-sm text-white w-100 font-weight-bold" data-toggle="modal" href="#createcustomer">
                                    <i class="fa fa-user-plus mr-1"></i> {{ __('home.addnewcustomer') }}
                                </button>
                            </div>
                            <div class="col-lg-9 col-md-8 mb-2">
                                <label class="form-label mb-1 font-weight-bold" style="color: #23395D;">
                                    <i class="fa fa-search mr-1"></i> {{ __('home.chooseclient') }}
                                </label>
                                <select name="clientnamesearch" id="clientnamesearch" class="form-control select2">
                                    <option value="1">عميل نقدي - CASH CUSTOMER</option>
                                </select>
                            </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" style="direction: rtl;">
                        <table class="optometry-table">
                            <thead>
                                <tr>
                                    <th colspan="3" class="header-grey">العين اليسار OS (L)</th>
                                    <th colspan="3" class="header-grey">العين اليمين OD (R)</th>
                                    <th class="header-grey" style="width: 15%;">النوع</th>
                                </tr>
                                <tr class="header-grey">
                                    <th>SPH</th><th>CYL</th><th>AX</th>
                                    <th>SPH</th><th>CYL</th><th>AX</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <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>
                                    <td class="header-grey">Distance / بعيد</td>
                                </tr>
                                <tr>
                                    <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>
                                    <td class="header-grey">Near / قريب</td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="no-border"></td> 
                                    <td colspan="3">
                                        <div class="ipd-wrapper">
                                            <div class="ipd-item">
                                                <span class="ipd-label">IPD far :</span>
                                                <input type="text" name="ipd_far" class="ipd-input">
                                            </div>
                                            <div class="ipd-item">
                                                <span class="ipd-label">IPD near :</span>
                                                <input type="text" name="ipd_near" class="ipd-input">
                                            </div>
                                        </div>
                                    </td>
                                    <td class="no-border"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

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

<div class="modal fade" id="createcustomer" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">إضافة عميل جديد</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>الاسم</label>
                    <input type="text" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label>الجوال</label>
                    <input type="text" id="phone" class="form-control">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="createnewcustomerajax()">حفظ</button>
            </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>
$(document).ready(function() {
    $('.select2').select2({ width: '100%' });

    $('#clientnamesearch').on('change', function() {
        let customerId = $(this).val();
        $('#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) { fillTable(data); } else { resetTable(); }
            },
            error: function() { $('#loading-screen').hide(); resetTable(); }
        });
    });

    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() {
        $('input[type="text"]').val('0.00');
        $('input[name*="_ax"]').val('0');
    }

    $('#optometryForm').on('submit', function(e) {
        e.preventDefault();
        $('#loading-screen').css('display', 'flex');
        $.ajax({
            url: "{{ route('sizes.store') }}",
            type: "POST",
            data: $(this).serialize(),
            success: function() {
                $('#loading-screen').hide();
                Swal.fire({ icon: 'success', title: 'تم الحفظ بنجاح' });
            }
        });
    });
});

function printOptometry() {
    var content = document.getElementById('printableTableArea').innerHTML;
    var win = window.open('', '', 'height=700,width=950');
    win.document.write('<html><head><style>body{direction:rtl; font-family:Arial;} table{width:100%; border-collapse:collapse;} th,td{border:1px solid #4a308b; padding:10px; text-align:center;} .header-grey{background:#eee;}</style></head><body>');
    win.document.write(content.replace(/<input[^>]*value="([^"]*)"[^>]*>/g, '<span>$1</span>'));
    win.document.write('</body></html>');
    win.document.close();
    win.print();
}
</script>
@endsection