@extends('layouts.master')

@section('css')
    <!-- Internal Data table css -->
    <link href="{{ URL::asset('assets/plugins/datatable/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/buttons.bootstrap4.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" />
    <link href="{{ URL::asset('assets/plugins/datatable/css/jquery.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/datatable/css/responsive.dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">

    <!-- Internal Spectrum-colorpicker css -->
    <link href="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.css') }}" rel="stylesheet">

    <style>
        /* ==========================================================
           Previous Purchases Invoices 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;
        }

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

        .form-control-filter {
            border: 1.5px solid #cbd5e1 !important;
            border-radius: 9px !important;
            font-size: 14px !important;
            font-weight: 700 !important;
            padding: 9px 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;
        }

        /* جدول الفواتير العصري */
        #example1 {
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 0;
            width: 100% !important;
        }

        #example1 thead th {
            background: #1e293b !important;
            color: #f8fafc !important;
            font-size: 12.5px !important;
            font-weight: 700 !important;
            padding: 12px 10px !important;
            border: none !important;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
        }

        #example1 tbody td {
            vertical-align: middle !important;
            padding: 10px 8px !important;
            font-size: 13px;
            color: #334155;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.15s ease;
            text-align: center;
        }

        #example1 tbody tr:hover td {
            background-color: #f8fafc;
        }

        /* أزرار العمليات */
        .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 8px;
            transition: all 0.2s ease;
            border: none;
            color: white !important;
            text-decoration: none !important;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
        }

        .btn-print { background: linear-gradient(135deg, #1e293b, #0f172a) !important; }
        .btn-delete { background: linear-gradient(135deg, #ef4444, #dc2626) !important; }
        .btn-upload { background: linear-gradient(135deg, #0284c7, #0369a1) !important; }

        /* طبقة التقويم المرتفعة */
        #ui-datepicker-div,
        .ui-datepicker,
        .datepicker,
        .datepicker-dropdown {
            z-index: 999999 !important;
        }
    </style>
@endsection

@section('title')
    {{ __('home.previousPurchasesInvoices') }}
@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="fa fa-shopping-cart" style="font-size: 18px;"></i>
                    </div>
                    <div>
                        <h4 class="content-title mb-0 font-weight-bold" style="color: #0f172a;">{{ __('home.previousPurchasesInvoices') }}</h4>
                        <span class="text-muted tx-13 font-weight-bold">البحث المتقدم في فواتير المشتريات ومتابعة حسابات الموردين</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('content')

    @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-xl-12">

            {{-- كارت الفلاتر والبحث --}}
            <div class="invoices-main-card p-4">
                <form action="" method="POST" role="search" autocomplete="off">
                    {{ csrf_field() }}

                    <div class="row align-items-end">

                        {{-- 1. البحث برقم الفاتورة --}}
                        <div class="col-lg-6 col-md-6 mb-3 mb-lg-0" id="start_at">
                            <label class="filter-title-label" for="invoiceid">
                                <i class="fa fa-hashtag text-primary"></i> {{ __('home.enterinvoicenumber') }}
                            </label>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-light text-muted" style="border: 1.5px solid #cbd5e1; border-left: none; border-radius: 0 9px 9px 0;">
                                        <i class="fa fa-search"></i>
                                    </span>
                                </div>
                                <input class="form-control form-control-filter"
                                       value="{{ $start_at ?? '' }}"
                                       id="invoiceid"
                                       placeholder="1********"
                                       type="text"
                                       onkeyup="searchaboutinvoiceByIdfunction()"
                                       style="border-radius: 9px 0 0 9px !important; border-right: none;"
                                       required>
                            </div>
                        </div>

                        {{-- 2. البحث باسم المورد --}}
                        <div class="col-lg-6 col-md-6" id="start_at">
                            <label for="clientnamesearch" class="filter-title-label">
                                <i class="fa fa-truck text-success"></i> {{ __('home.shearchbysuppliername') }}
                            </label>
                            <select class="form-control select2" name="clientnamesearch" id="clientnamesearch" style="width: 100% !important;">
                                <option value="">-- {{ __('home.shearchbysuppliername') }} --</option>
                                @foreach (App\Models\supllier::get() as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>

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

            {{-- كارت الجدول الذي يتم تحديثه بواسطة الـ AJAX --}}
            <div class="invoices-main-card p-0">
                <div class="table-responsive hoverable-table p-3" id="ajax_responce_allinvoicesDiv">
                    <table class="table text-md-nowrap text-center our-table table-hover" id="example1" data-page-length='50' width="100%">
                        <thead>
                            <tr>
                                <th>{{ __('home.Invoice_no') }}</th>
                                <th>{{ __('home.buyer name') }}</th>
                                <th>{{ __('home.suppliername') }}</th>
                                <th>{{ __('home.date') }}</th>
                                <th>{{ __('home.branch') }}</th>
                                <th>{{ __('home.total') }}</th>
                                <th>{{ __('home.paymentmethod') }}</th>
                                <th>{{ __('home.operations') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="8" class="py-5 text-center text-muted font-weight-bold">
                                    <i class="fa fa-spinner fa-spin fa-2x d-block mb-2 text-primary"></i>
                                    جاري تحميل فواتير المشتريات...
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

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

    <!-- Modal 1: تأكيد الحذف -->
    <div class="modal fade" id="delete_quotation">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header bg-danger-transparent">
                    <h6 class="modal-title font-weight-bold text-danger">
                        <i class="fa fa-exclamation-triangle ml-1"></i> {{ __('home.alert') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form>
                    {{ csrf_field() }}
                    <div class="modal-body p-4 text-center">
                        <p class="font-weight-bold mb-2 text-dark" style="font-size: 15px;">
                            {{ __('home.Are_you_sure_delete') }}
                        </p>
                        <input type="text" hidden class="form-control parent-input" name="delete_id" id="delete_id">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
                        <button type="button" id="delete_quotation_function" name="delete_quotation_function" data-dismiss="modal" class="btn btn-danger px-4 font-weight-bold">{{ __('home.confirm') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal 2: طرق الدفع -->
    <div class="modal fade" id="paymentmethod">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header bg-primary-transparent">
                    <h6 class="modal-title font-weight-bold text-primary">
                        <i class="fa fa-credit-card ml-1"></i> {{ __('home.paymentmethod') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-4">
                    <div class="d-flex align-items-center justify-content-between p-3 mb-3 bg-light rounded" style="border: 1px dashed #cbd5e1;">
                        <span class="font-weight-bold text-muted" style="font-size: 15px;">{{ __('home.total') }} :</span>
                        <div>
                            <span class="font-weight-bold text-primary" style="font-size: 22px;" id="totalvalue">0</span>
                            <span class="font-weight-bold text-dark">&nbsp;{{ __('home.SAR') }}</span>
                        </div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="filter-title-label">{{ __('home.paymentmethod') }}</label>
                        <select class="form-control form-control-filter" name="paymodal" id='paymodal' required>
                            <option value="Cash">{{ __('report.cash') }}</option>
                            <option value="Shabka">{{ __('report.shabka') }}</option>
                            <option value="Bank_transfer">{{ __('home.Bank_transfer') }}</option>
                            <option value="Credit">{{ __('report.credit') }}</option>
                        </select>
                    </div>

                    <div class="row">
                        <div class="col-6 mb-2">
                            <label class="filter-title-label">{{ __('report.cash') }}</label>
                            <input type="text" class="form-control form-control-filter" name="cashamount" id="cashamount" readonly value="0">
                        </div>
                        <div class="col-6 mb-2">
                            <label class="filter-title-label">{{ __('report.shabka') }}</label>
                            <input type="text" class="form-control form-control-filter" name="bankamount" id="bankamount" readonly value="0">
                        </div>
                        <div class="col-6 mb-2">
                            <label class="filter-title-label">{{ __('home.Bank_transfer') }}</label>
                            <input type="text" class="form-control form-control-filter" name="Bank_transfer" id="Bank_transfer" readonly value="0">
                        </div>
                        <div class="col-6 mb-2">
                            <label class="filter-title-label">{{ __('report.credit') }}</label>
                            <input type="text" class="form-control form-control-filter" name="creaditamount" id="creaditamount" readonly value="0">
                        </div>
                        <input hidden type="text" id="invoiceid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
                    <button type="button" id="confirmpayment" name="confirmpayment" data-dismiss="modal" class="btn btn-danger px-4 font-weight-bold">{{ __('home.confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3: رفع المرفقات PDF -->
    <div class="modal fade" id="uplaodmodal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header bg-primary-transparent">
                    <h6 class="modal-title font-weight-bold text-primary">
                        <i class="fa fa-file-pdf-o ml-1"></i> {{ __('home.uplaodpdf') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form enctype="multipart/form-data" method="POST" role="search" name="form-name" id='formdata' autocomplete="off">
                    {{ csrf_field() }}
                    <div class="modal-body p-4">
                        <input type="hidden" name="orderidpurchase" id="orderidpurchase">
                        <div class="form-group mb-0">
                            <label class="filter-title-label">{{ __('home.attachments') }}</label>
                            <input autocomplete="off" onchange="readURL(this)" type="file" id="attachments" name="attachments" class="form-control form-control-filter" style="padding-top: 6px !important;">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
                        <button type="submit" class="btn btn-primary px-4 font-weight-bold">{{ __('home.confirm') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal 4: تعديل المورد -->
    <div class="modal fade" id="updateCustomer">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header bg-primary-transparent">
                    <h6 class="modal-title font-weight-bold text-primary">
                        <i class="fa fa-user-circle ml-1"></i> {{ __('home.updatecustome') }}
                    </h6>
                    <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ csrf_field() }}
                <div class="modal-body p-4">
                    <input type="hidden" id="token_search" value="{{ csrf_token() }}">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="filter-title-label">{{ __('home.Invoice_no') }}</label>
                            <input type="number" class="form-control form-control-filter bg-light" id="id" name="id" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="filter-title-label">{{ __('home.clietName') }}</label>
                            <input type="text" class="form-control form-control-filter bg-light" id="customername" name="customername" readonly>
                        </div>
                    </div>
                    <div class="form-group mb-0">
                        <label class="filter-title-label">{{ __('home.chooseclient') }}</label>
                        <select class="form-control select2" style="width: 100% !important;" name='customerId' id='customerId' required>
                            @foreach (App\Models\supllier::get() as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">{{ __('home.cancel') }}</button>
                    <button type="submit" id="updatecustomerbut" data-dismiss="modal" class="btn btn-primary px-4 font-weight-bold">{{ __('home.confirm') }}</button>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <!-- Internal Data tables -->
    <script src="{{ URL::asset('assets/js/table-data.js') }}"></script>

    <!--Internal Datepicker js -->
    <script src="{{ URL::asset('assets/plugins/jquery-ui/ui/widgets/datepicker.js') }}"></script>
    <!--Internal jquery.maskedinput js -->
    <script src="{{ URL::asset('assets/plugins/jquery.maskedinput/jquery.maskedinput.js') }}"></script>
    <!--Internal spectrum-colorpicker js -->
    <script src="{{ URL::asset('assets/plugins/spectrum-colorpicker/spectrum.js') }}"></script>
    <!-- Internal Select2.min js -->
    <script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <!--Internal Ion.rangeSlider.min js -->
    <script src="{{ URL::asset('assets/plugins/ion-rangeslider/js/ion.rangeSlider.min.js') }}"></script>
    <!--Internal jquery-simple-datetimepicker js -->
    <script src="{{ URL::asset('assets/plugins/amazeui-datetimepicker/js/amazeui.datetimepicker.min.js') }}"></script>
    <!-- Ionicons js -->
    <script src="{{ URL::asset('assets/plugins/jquery-simple-datetimepicker/jquery.simple-dtpicker.js') }}"></script>
    <!--Internal pickerjs js -->
    <script src="{{ URL::asset('assets/plugins/pickerjs/picker.min.js') }}"></script>
    <!-- Internal form-elements js -->
    <script src="{{ URL::asset('assets/js/form-elements.js') }}"></script>

    <script>
        var date = $('.fc-datepicker').datepicker({
            dateFormat: 'yy-mm-dd',
            beforeShow: function(input, inst) {
                setTimeout(function() {
                    $('#ui-datepicker-div').css('z-index', 999999);
                }, 0);
            }
        }).val();
    </script>

    <script>
        $('#delete_quotation').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            $('#delete_id').val(id);
        });

        $("#delete_quotation_function").click(function(e) {
            var selectCustomer = $('#delete_id').val();
            if (selectCustomer != '') {
                $.ajax({
                    url: "{{ URL::to('delete_purchase_invoice') }}/" + selectCustomer,
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    }
                });
            }
        });

        $("#formdata").on('submit', function(e) {
            e.preventDefault();
            var url = "{{ URL::to('uploadfilepurchases') }}";
            $.ajax({
                url: url,
                type: 'post',
                cache: false,
                contentType: false,
                processData: false,
                data: new FormData(this),
                success: function(products) {
                    $('#uplaodmodal').modal('hide');
                    $("#ajax_responce_allinvoicesDiv").html(products);
                },
                error: function(response) {
                    console.log(response['responseText']);
                }
            });
        });

        function searchaboutproductfunction() {
            date = $('#date').val();
            $.ajax({
                url: "{{ URL::to('searchAllInvoicespaginatenewpurchase') }}/" + date,
                type: "GET",
                dataType: "html",
                success: function(products) {
                    $("#ajax_responce_allinvoicesDiv").html(products);
                }
            });
        }

        $('select[name="clientnamesearch"]').on('change', function() {
            var selectCustomer = $(this).val();
            if (selectCustomer != '') {
                $.ajax({
                    url: "{{ URL::to('getinvoicesbyspplluer') }}/" + selectCustomer,
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    }
                });
            } else {
                $.ajax({
                    url: "{{ URL::to('getAllinvicesajax') }}",
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    }
                });
            }
        });

        function searchaboutinvoiceByIdfunction() {
            date = $('#invoiceid').val();
            if (date != '') {
                $.ajax({
                    url: "{{ URL::to('searchaboutinvoiceByIdfunctionpurchases') }}/" + date,
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    }
                });
            } else {
                $.ajax({
                    url: "{{ URL::to('getAllinvicesajax') }}",
                    type: "GET",
                    dataType: "html",
                    success: function(products) {
                        $("#ajax_responce_allinvoicesDiv").html(products);
                    }
                });
            }
        }

        $("#updatecustomerbut").click(function(e) {
            var url = "{{ URL::to('updatecustomerDataInvoicepurchases') }}";
            token_search = $('#token_search').val();
            $.ajax({
                url: url,
                type: 'post',
                cache: false,
                dataType: "html",
                data: {
                    _token: token_search,
                    id: $('#id').val(),
                    customername: $('#customername').val(),
                    customerId: $('#customerId').val(),
                },
                success: function(data) {
                    $("#ajax_responce_allinvoicesDiv").html(data);
                },
                error: function(response) {
                    console.log(response['responseText']);
                }
            });
        });

        $(document).on('click', '#ajax_pagination_in_search a', function(e) {
            e.preventDefault();
            var search_by_text = $("#date").val();
            var url = $(this).attr("href");
            var token_search = $("#token_search").val();

            $.ajax({
                url: url,
                type: 'get',
                dataType: 'html',
                cache: false,
                data: {
                    search_by_text: search_by_text,
                    "_token": token_search
                },
                success: function(data) {
                    $("#ajax_responce_allinvoicesDiv").html(data);
                }
            });
        });
    </script>

    <script>
        $('select[name="paymodal"]').on('change', function() {
            var selectCustomer = $(this).val();
            var value = 0;
            if ($('#cashamount').val() != 0) {
                value = $('#cashamount').val();
            } else if ($('#bankamount').val() != 0) {
                value = $('#bankamount').val();
            } else if ($('#Bank_transfer').val() != 0) {
                value = $('#Bank_transfer').val();
            } else {
                value = $('#creaditamount').val();
            }

            if (selectCustomer == 'Cash') {
                $('#cashamount').val(value);
                $('#bankamount').val(0);
                $('#creaditamount').val(0);
                $('#Bank_transfer').val(0);
                document.getElementById("bankamount").readOnly = true;
                document.getElementById("cashamount").readOnly = true;
                document.getElementById("Bank_transfer").readOnly = true;
            } else if (selectCustomer == 'Shabka') {
                $('#cashamount').val(0);
                $('#bankamount').val(value);
                $('#creaditamount').val(0);
                $('#Bank_transfer').val(0);
                document.getElementById("bankamount").readOnly = true;
                document.getElementById("cashamount").readOnly = true;
                document.getElementById("Bank_transfer").readOnly = true;
            } else if (selectCustomer == 'Credit') {
                $('#cashamount').val(0);
                $('#bankamount').val(0);
                $('#Bank_transfer').val(0);
                $('#creaditamount').val(value);
                document.getElementById("bankamount").readOnly = true;
                document.getElementById("cashamount").readOnly = true;
                document.getElementById("Bank_transfer").readOnly = true;
            } else if (selectCustomer == 'Bank_transfer') {
                $('#cashamount').val(0);
                $('#bankamount').val(0);
                $('#creaditamount').val(0);
                $('#Bank_transfer').val(value);
                document.getElementById("bankamount").readOnly = true;
                document.getElementById("cashamount").readOnly = true;
                document.getElementById("Bank_transfer").readOnly = true;
            } else {
                $('#cashamount').val(value);
                $('#bankamount').val(0);
                $('#creaditamount').val(0);
                $('#Bank_transfer').val(0);
                document.getElementById("bankamount").readOnly = false;
                document.getElementById("cashamount").readOnly = false;
                document.getElementById("Bank_transfer").readOnly = false;
            }
        });

        $('#updateCustomer').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            $('#cashamount').val(0);
            $('#Bank_transfer').val(0);
            $('#creaditamount').val(0);
            $('#bankamount').val(0);

            var customername = button.data('customername');
            var modal = $(this);
            modal.find('.modal-body #customername').val(customername);
            modal.find('.modal-body #id').val(id);
        });

        $('#paymentmethod').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var invoice = button.data('totalinvoice');
            $('#invoiceid').val(id);
            document.getElementById('totalvalue').innerHTML = invoice;
            $('#cashamount').val(invoice);
        });

        $('#uplaodmodal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            $('#orderidpurchase').val(id);
        });

        $("#confirmpayment").click(function(e) {
            if ($('#cashamount').val() == '') $('#cashamount').val(0);
            if ($('#bankamount').val() == '') $('#bankamount').val(0);
            if ($('#creaditamount').val() == '') $('#creaditamount').val(0);
            if ($('#Bank_transfer').val() == '') $('#Bank_transfer').val(0);

            var text = document.getElementById('totalvalue').innerText;

            if (Number(text) == (Number($('#cashamount').val()) + Number($('#Bank_transfer').val()) + Number($('#bankamount').val()) + Number($('#creaditamount').val()))) {
                $.ajax({
                    url: "{{ URL::to('updatepaymentconfirmpaymentpurchases') }}/" + $('#invoiceid').val() + '/' + $('#cashamount').val() + '/' + $('#bankamount').val() + '/' + $('#creaditamount').val() + "/" + $('#Bank_transfer').val() + '/' + $('#paymodal').val(),
                    type: "GET",
                    dataType: "html",
                    success: function(data) {
                        $("#ajax_responce_allinvoicesDiv").html(data);
                    },
                    error: function(response) {
                        alert("{{ __('home.sorryerror') }}");
                    }
                });
            } else {
                $('#saveinvice').val(0);
                alert("{{ __('home.entermonycorrect') }}");
            }
        });

        $(document).ready(function() {
            $('select[name="clientnamesearch"]').on('change', function() {
                var selectclientid = $(this).val();
                if (selectclientid) {
                    $.ajax({
                        url: "{{ URL::to('getcustomer') }}/" + selectclientid,
                        type: "GET",
                        dataType: "json",
                        success: function(data) {
                            $('#clientName').val(data['name']);
                            $('#address').val(data['address']);
                            $('#phonenumber').val(data['phone']);
                            $('#notes').val(data['notes']);
                        }
                    });
                }
            });
        });

        $('select[name="searchproductNo"]').on('change', function() {
            var selectclientid = $(this).val();
            if (selectclientid) {
                $.ajax({
                    url: "{{ URL::to('getproduct') }}/" + selectclientid,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('#quentity').val(data['numberofpice']);
                    }
                });
            }
        });

        $(document).ready(function() {
            $.ajax({
                url: "{{ URL::to('getAllinvicesapurchasesjax') }}",
                type: "GET",
                dataType: "html",
                success: function(products) {
                    $("#ajax_responce_allinvoicesDiv").html(products);
                }
            });

            $('#invoice_number').hide();

            $('input[type="radio"]').click(function() {
                if ($(this).attr('id') == 'type_div') {
                    $('#invoice_number').hide();
                    $('#type').show();
                    $('#start_at').show();
                    $('#end_at').show();
                } else {
                    $('#invoice_number').show();
                    $('#type').hide();
                    $('#start_at').hide();
                    $('#end_at').hide();
                }
            });
        });
    </script>
@endsection