@extends('lay.dnekcab.retsam')

@section('title')
  {{ $page_title }}
@endsection

@section('page-content')

    <div class="page-content no-print">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body list-heading">
                            <div class="card-header p-0">
                                <div class="d-flex justify-content-between align-items-center">
                                    <ol class="breadcrumb align-items-center m-0">
                                        <li class="breadcrumb-item">
                                            <a href="{{ route('dashboard') }}">
                                                <i class="fa fa-list mx-1" style="position: relative; top: 2px"></i> {{ __('global.dashboard') }}
                                            </a>
                                        </li>
                                        <li class="breadcrumb-item active">
                                            <i class="fas fa-angle-double-left mx-1" style="position: relative; top: 3px"></i> {{ __('items.create_fees9_form') }}
                                        </li>
                                    </ol>
                                    <div class="d-flex gap-1">
                                        <button type="button" style="padding: 4px 6px 8px 6px !important" class="btn btn-primary btn-sm editFees9FormBtn" data-bs-toggle="modal" data-bs-target="#fees9-form-modal">
                                            <i class="fa fa-pen"></i> {{ __('global.update') }}
                                        </button>
                                        <button type="button" style="padding: 4px 6px 8px 6px !important" class="btn btn-primary btn-sm" onclick="printForm()">
                                            <i class="fa fa-print"></i> {{ __('global.print') }}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-body">
                                    <div class="card card-primary">
                                        <div class="card-body p-0">
                                            <div class="modal-body py-0">
                                                <div class="row mx-0">
                                                    <div class="col-md-4">
                                                        <label class="form-label">{{ __('items.fees9.department_name') }}</label><br>
                                                        <p style="font-weight: normal">{{ $fees9Form->department->name }}</p>
                                                        <input type="hidden" id="fees9-id" value="{{ encryption($fees9Form->id) }}">
                                                    </div>
                                                    <div class="col-md-8">
                                                        <label class="form-label">{{ __('items.fees9.description') }}</label><br>
                                                        <p style="font-weight: normal">{{ $fees9Form->description }}</p>
                                                    </div>
                                                </div>
                                                <div class="row mx-1">
                                                    <div class="col py-2 px-0" style="border-top: 1px solid #CCC; border-bottom: 1px solid #CCC">
                                                        <label class="form-label mb-0">{{ __('items.fees9.items_info') }}</label>
                                                    </div>
                                                </div>
                                                <div class="row mx-0">
                                                    <div class="table-responsive">
                                                        <table class="table table-hover table-bordered fs-11 custom-talbe">
                                                            <thead class="sticky-top shadow-sm">
                                                                <tr>
                                                                    <th style="width: 2%" class="text-center">#</th>
                                                                    <th>{{ __('items.name')}}</th>
                                                                    <th>{{ __('items.quantity')}}</th>
                                                                    <th>{{ __('items.unit')}}</th>
                                                                    <th>{{ __('items.category')}}</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                @if($fees9FormItems->isEmpty())
                                                                    <tr>
                                                                        <td colspan="11">
                                                                            <x-record-not-found />
                                                                        </td>
                                                                    </tr>
                                                                @else
                                                                    @php $counter = 1; @endphp
                                                                    @foreach($fees9FormItems as $formItems)
                                                                        <tr>
                                                                            <td class="text-center">
                                                                                <button type="button" class="btn btn-sm text-center btn-primary lh-10">{{$counter++}}</button>
                                                                            </td>
                                                                            <td>{{ $formItems->itemMaster->name }}</td>
                                                                            <td>{{ $formItems->quantity }}</td>
                                                                            <td>{{ $formItems->unit->name }}</td>
                                                                            <td>{{ $formItems->category->name }}</td>
                                                                        </tr>
                                                                    @endforeach
                                                                @endif
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <!-- end page title -->

        </div> <!-- container-fluid -->
    </div>
    <div class="modal fade" id="fees9-form-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">{{ __('items.fees9.fees9_edit_form') }}</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-0" style="max-height: 80vh; overflow-y: auto;" id="edit-form-section">
                    <div class="row p-4 text-center"><i class="fa fa-spinner fa-spin" style="font-size: 60px"></i></div>
                </div>
            </div>
        </div>
    </div>

    <div id="print-form">
        <p class="text-center" id="title" style="font-size: 25px">درخواست تحویلخانه</p>
        <span class="float-end me-2" id="number">قرار 1. شماره ........</span>
        <span class="float-start ms-2" id="fees9">فورم ف س 9</span><br>
        <span class="float-end me-2" id="date">2. تاریخ {{ $shamsiiDate }} &nbsp;&nbsp; - &nbsp; &nbsp;{{ $hijriDate }}</span>
        <span class="float-start ms-2" id="dep-name">3. اسم اداره درخواست کننده {{ $fees9Form->department->name }}</span><br>
        <table class="table mb-0">
            <tr>
                <td class="text-center" style="width: 9%">شماره اقلام</td>
                <td class="text-center" style="width: 9%">شماره ذخیره</td>
                <td class="text-center" style="width: 50%">تفصیلات جنسی خدمات</td>
                <td class="text-center" style="width: 8%">مقدار</td>
                <td class="text-center" style="width: 8%">واحد</td>
                <td class="text-center">معامله شد به حساب</td>
            </tr>
            <tr>
                <td class="text-center" style="padding: 1px 5px">5</td>
                <td class="text-center" style="padding: 1px 5px">6</td>
                <td class="text-center" style="padding: 1px 5px">7</td>
                <td class="text-center" style="padding: 1px 5px">8</td>
                <td class="text-center" style="padding: 1px 5px">9</td>
                <td class="text-center" style="padding: 1px 5px">10</td>
            </tr>
            <tr>
                <td style="width: 9%; border-bottom: none"></td>
                <td style="width: 9%; border-bottom: none"></td>
                <td style="width: 50%; border-bottom: none">
                    <h4>
                        به ریاست محترم عمومی دفتر مقام عالی ریاست الوزراء ا.ا.ا
                    </h4>
                    <label style="margin-right: 10px;">السلام علیکم ورحمةُ الله وبرکاته</label>
                    <h5>
                        {{ $fees9Form->description }}
                    </h5>
                </td>
                <td style="border-bottom: none"></td>
                <td style="border-bottom: none"></td>
                <td style="border-bottom: none"></td>
            </tr>
        </table>
        <table class="table">
            @if($fees9FormItems->isEmpty())
                <tr>
                    <td colspan="11">
                        <x-record-not-found />
                    </td>
                </tr>
            @else
                @php $counter = 1; @endphp
                @foreach($fees9FormItems as $formItems)
                    <tr class="items-records">
                        <td style="width: 9%;"></td>
                        <td style="width: 9%;"></td>
                        <td style="width: 50%; padding: 0px 20px">
                            <span style="font-size: 15px;">{{ $counter++ }}. {{ $formItems->itemMaster->name }}</span>
                        </td>
                        <td style="width: 8%; padding: 0px 5px; text-align: center;">
                            <span style="font-size: 15px;">{{ $formItems->quantity }}</span>
                        </td>
                        <td style="width: 8%; padding: 0px 2px; text-align: center;">
                            <span style="font-size: 15px;">{{ $formItems->unit->name }}</span>
                        </td>
                        <td></td>
                    </tr>
                @endforeach
            @endif
            <tr>
                <td style="border-top: none"></td>
                <td style="border-top: none"></td>
                <td style="border-top: none; text-align: center">
                    <p style="text-align: right;">بدین وسیله موضوع احتراما به مقام محترم پیشنهاد گردیده تا در مورد تهیه و تدارک اجناس متذکره بخش مربوطه را هدایت لازم عنایت فرموده ممنون سازند.</p>
                    <p style="margin: 0 auto;">با احترام</p>
                    <span>مولوی عبدالله عزام</span><br>
                    <span>رییس عمومی دفتر مقام</span><br>
                    <span>معاونیت اقتصادی ریاست الوزرا ا.ا.ا</span>
                    <p style="text-align: right; margin: 0; padding: 0; font-size: 13px">مدتت هفت روز تهیه گردد</p>
                </td>
                <td style="border-top: none">
                <td style="border-top: none">
                <td style="border-top: none">
            </tr>
            <tr>
                <td colspan="5" style="border-bottom: none; padding: 2px 5px;">
                    <span style="font-size: 15px">11. اقلام که در آن خط گرفته شده در تحویلخانه موجود نیست خریداری آن درخواست گردد.</span>
                </td>
                <td style="border-bottom: none; padding: 2px 1px;"><span style="font-size: 15px">12. نمبر تکت توزیع</span></td>
            </tr>
            <tr>
                <td colspan="5" style="border-top: none; padding: 2px 15px;">
                    <span style="font-size: 15px; border-top: 1px solid #AAA; padding-top: 4px;">&nbsp;آمر تحویلخانه&nbsp; &nbsp; &nbsp; &nbsp;</span>
                    <span style="font-size: 15px; border-top: 1px solid #AAA; margin-right: 150px">&nbsp;تاریخ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp; &nbsp; &nbsp;/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
                </td>
                <td style="border-top: none; padding: 2px 1px;">
                    <span style="font-size: 15px;">&nbsp;تاریخ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/ &nbsp; &nbsp; &nbsp; &nbsp;/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span>
                </td>
            </tr>
            {{-- <tfoot> --}}
                <tr>
                    <td colspan="6" style="padding: 2px 10px; border: none;">
                        <div style="float: right; font-size: 14px;">
                            دهنده ........
                            <br>
                            لطفا اجناس ذیل خدمات را فراهم نمایید.
                            <br>
                            در یک اصل و دو کاپی ترتیب میشود
                            <br>
                            الف: اصل آن به تحویلخانه حفظ میگردد.
                        </div>
                        <div style="float: left; font-size: 14px;">
                            مدیریت های محترم محاسبه جنسی و تحویلخانه!
                            <br>
                            در زمینه اصولا اجراات نمایید.
                        </div>
                    </td>
                </tr>
            {{-- </tfoot> --}}
        </table>
    </div>
    <style>
        .form-label{
            font-weight: bold;
        }
        .custom-talbe td{
            font-weight: normal !important;
        }
        #print-form{
            display: none;
            background: #ffffff;
        }
        #print-form *{
            color: #000 !important;
        }
        #print-form table td{
            border: 1px solid #CCC;
        }
        #print-form  .last-row td {
            border-bottom: 1px solid #CCC !important;
        }
        @media print {
            .no-print {
                display: none !important;
            }
            #print-form {
                display: block !important;
            }
            .modal {
                position: relative !important;
                display: block !important;
                overflow: visible !important;
            }
            .modal, .modal-backdrop {
                display: none !important;
            }
            @page{
                margin: 10px !important;
            }
        }
        .items-records td{
            border-top: none !important;
            border-bottom: none !important;
        }

    </style>
@endsection
@section('js')
<script>
    $(document).on('click', '.editFees9FormBtn', function(e) {
        let rid = $("#fees9-id").val();
        $.ajax({
            url: "{{ route('items.fees9.edit') }}",
            method: "GET",
            data: {
                "_token": "{{ csrf_token() }}",
                rid: rid
            },
            success: function(response) {
                $("#edit-form-section").html(response);
                $('.select2').select2();
            },
            error: function(xhr, status, error) {
                toastr.error("Error In Operation");
            }
        });
    });

    function editFees9Form(formID)
    {
        if(!validateForm(formID)){
            return false;
        }
        var isValid = true;
        var rows = document.querySelectorAll('.form-row');

        rows.forEach(function(row, index) {
            var itemName = row.querySelector('[name="item_name[]"]');
            var quantity = row.querySelector('[name="quantity[]"]');
            var unit = row.querySelector('[name="unit[]"]');
            var category = row.querySelector('[name="category[]"]');

            // Ensure all fields exist before accessing their properties
            if (itemName && quantity && unit && category) {
                // Check if any field is empty
                if (!itemName.value || !quantity.value || !unit.value || !category.value) {
                    isValid = false;

                    // Apply red border to empty fields
                    if (!itemName.value) {
                        itemName.style.border = '1px solid red';
                    } else {
                        itemName.style.border = '';
                    }
                    if (!quantity.value) {
                        quantity.style.border = '1px solid red';
                    } else {
                        quantity.style.border = '';
                    }
                    if (!unit.value) {
                        unit.style.border = '1px solid red';
                    } else {
                        unit.style.border = '';
                    }
                    if (!category.value) {
                        category.style.border = '1px solid red';
                    } else {
                        category.style.border = '';
                    }
                } else {
                    // Remove red border if fields are filled
                    itemName.style.border = '';
                    quantity.style.border = '';
                    unit.style.border = '';
                    category.style.border = '';
                }
            }
        })

        // Stop form submission if any field is empty
        if (!isValid) {
            return false;
        }

        $("#"+formID).submit();
    }

    function printForm()
    {
        window.print();
    }
</script>
@endsection