@extends('admin.layouts.master')
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
@section('content')
    <style>
        #SupplierSimple_length label {
            float: left;
        }

        #SupplierSimple_length {
            --bs-gutter-x: 1.5rem;
            padding-left: calc(var(--bs-gutter-x)* .5);
        }
    </style>
    @include('admin.layouts.css')

    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-end my-4 page-header-breadcrumb">
        {{-- <h1 class="page-title fw-semibold fs-18 mb-0 urdu-fonts">@lang('lang.supplier_account')</h1> --}}
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item urdu-fonts"><a href="javascript:void(0);">@lang('lang.supplier')</a></li>
                    <li class="breadcrumb-item active urdu-fonts" aria-current="page">@lang('lang.supplier_account')</li>
                </ol>
            </nav>
        </div>
    </div>
    {{-- <div class="col-xl-6 p-3"> --}}
    <div class=" offcanvas offcanvas-urdu offcanvas-end" tabindex="-1" id="offcanvasRight"
        aria-labelledby="offcanvasRightLabel1">
        <div class="offcanvas-header border-bottom border-block-end-dashed">
            <h5 class="offcanvas-title" id="offcanvasRightLabel1 urdu-fonts">Notifications
            </h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body urd-offcanvas-body p-0" style="">
            <div class="box-body container-fluid mb-3 mt-2">

                <div class="form-group d-flex justify-content-between">
                    <div class="input-group">
                        <input style="font-family: inherit;" type="text" class="rounded-0 from_date form-control"
                            id="date" placeholder="Choose date">
                        <button id="resetButton" class="btn btn-primary rounded-0">Reset</button>
                    </div>
                    <a href="{{ route('admin.supplier.pdf') }}" class="btn btn-primary rounded-0">PDF</a>
                </div>
            </div>

            <table id="SupplierSimple" dir="rtl" class="mt-3 table table-bordered text-nowrap w-100">
                <input style="padding-left: 1px;line-height: 1.8888;" type="text"
                    class="form-control w-25 float-end mb-2 me-3" id="search-supplier" placeholder="Search...">

                <thead>
                    <tr>
                        <th class="urdu-fonts">@lang('lang.name')</th>
                        <th class="urdu-fonts">@lang('lang.previous_balance')</th>
                        <th class="urdu-fonts">@lang('lang.status')</th>
                        <th class="urdu-fonts">@lang('lang.date')</th>
                        <th class="urdu-fonts">@lang('lang.action')</th>
                    </tr>
                </thead>
            </table>

        </div>
    </div>
    {{-- </div> --}}
    </div>
    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                    <div class="button-div">
                        <button class="urdu-fonts btn btn-primary mb-1" type="button" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">زمیندار لسٹ</button>
                    </div>
                    <div class="card-title">
                        <h3>
                            @lang('lang.supplier_account')
                        </h3>
                    </div>
                </div>
                <form action="{{ route('admin.supplier.store') }}" class="ajax-form-img needs-validation" method="POST"
                    enctype="multipart/form-data" novalidate>
                    @csrf
                    <div class="card-body" id="main">
                        <div class="all">

                            <input type="hidden" id="update_id" name="update_id" value="{{ @$id->id }}">
                            <input type="hidden" name="prevprofile" value="{{ @$id->profile_img }}">
                            <div class="row gy-4">
                                <div class="row d-flex justify-content-end main_img mt-2">
                                    <label class="form-label">@lang('lang.picture')</label>
                                    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12  d-flex justify-content-end">
                                        <img class="rounded img-fluid image-preview"
                                            src="{{ @$id->profile_img ? asset('admin_assets/sabzi_mandi/zameendar') . '/' . $id->profile_img : asset('admin_assets/assets/images/faces/9.jpg') }}"
                                            alt="">
                                    </div>
                                    <div class="col-md-4">
                                        <input class="form-control image-input" name="profile_img[]" type="file">
                                    </div>
                                </div>
                                <!-- Page Header Close -->
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label mb-3">@lang('lang.fathername')</label>
                                    <input value="{{ @$id->fathername }}" name="fathername[]" type="text"
                                        class="form-control urdu-fonts rtl-text" placeholder="">
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label  mb-3">@lang('lang.name')</label>
                                    <input value="{{ @$id->name }}" name="name[]" required type="text"
                                        class="form-control urdu-fonts rtl-text" placeholder="">
                                    <div id="name_error" class="float-right text-end urdu-fonts invalid-feedback">
                                        @lang('validation.custom.required_name')
                                    </div>

                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label  mb-3">@lang('lang.address')</label>
                                    <input name="address[]" value="{{ @$id->address }}" type="text"
                                        class="form-control urdu-fonts rtl-text" placeholder="">
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label mb-3">@lang('lang.number')</label>
                                    <input name="phone_no[]" value="{{ @$id->phone_no }}" type="number"
                                        class="form-control urdu-numbers-format " placeholder="">
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label  mb-3">@lang('lang.nic_no')</label>
                                    <input name="nic_no[]" value="{{ @$id->nic_no }}" type="number"
                                        class="form-control urdu-numbers-format " placeholder="">
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label  mb-3">@lang('lang.cast')</label>
                                    <input name="cast[]" value="{{ @$id->cast }}" type="text"
                                        class="form-control urdu-fonts rtl-text" placeholder="">
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 ">
                                    <label class="form-label mb-3">@lang('lang.date')</label>
                                    <input name="date[]" type="date"
                                        value="{{ @$id->record_created == null ? date('Y-m-d') : @$id->record_created }}"
                                        class="form-control">
                                </div>

                                <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                    <label class="form-label mb-3">@lang('lang.previous_balance')</label>
                                    <input required value="{{ @$id->previous_balance }}" name="previous_balance[]"
                                        type="text" class="form-control urdu-numbers-format " placeholder="">
                                    <div id="previous_balance_error"
                                        class="float-right text-end urdu-fonts invalid-feedback">
                                        @lang('validation.custom.previous_balance')
                                    </div>
                                </div>


                                {{-- //end  --}}
                            </div>
                        </div>

                        {{-- Plus Button --}}
                        <div class="col-xl-2 mt-2">
                            <button type="button" class=" submit  btn btn-primary urdu-fonts" id="plusButton"><i
                                    class="add fa-solid fa-plus p-2"></i></button>
                        </div>


                    </div>

                    <div class="card-footer  col-xl-4 col-lg-6 col-md-6 col-sm-12 mt-2 float-end">
                        <button type="submit " class="submitButton form-control submit btn btn-primary  "
                            id="input-button">
                            <div class="spinner-border d-none" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            {{-- <span class="timer fw-bold"></span>  --}}
                            <span class="urdu-fonts"> @lang('lang.submit')</span>
                        </button>
                    </div>


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

        <!-- End:: row-1 -->
    </div>
    @push('page-script')
        <script type="7f6213e265ae82fb5d1f4bfb-text/javascript">
            $(document).ready(function() {

                // $(document).on('change','.custom-toggle-switch input[type="checkbox"]',function(){
                //     // alert('dd')
                //     var toggleSwitch = $(this).closest(".custom-toggle-switch");
                //     var icon = toggleSwitch.find(".check_class");
                //     var url = toggleSwitch.data("url");
                //     var status = $(this).is(":checked") ? 1 : 0;

                //     // Update icon class
                //     if (status === 1) {
                //         icon.removeClass("text-danger").addClass("text-success");
                //     } else {
                //         icon.removeClass("text-success").addClass("text-danger");
                //     }

                //     $.ajax({
                //         url: url,
                //         type: "GET",
                //         data: {
                //             status: status,
                //             _token: "{{ csrf_token() }}",
                //         },
                //         success: function(response) {
                //             console.log(response);
                //             // Handle success response
                //         },
                //         error: function(error) {
                //             // Handle error response
                //             alert("An error occurred while updating the status.");
                //         },
                //     });
                // })
                // $('.custom-toggle-switch input[type="checkbox"]').change(function() {
                //     alert('dsds');

                // });
                $("#date").flatpickr({
                    static: true
                });
                var upate_id = $('#update_id').val();
                if (upate_id !== '') {
                    $('#plusButton').hide();

                } else {
                    $('#plusButton').show();
                }

                function placeholders() {
                    $('.col-xl-6, .col-lg-6, .col-md-6, .col-sm-12').find('.form-control').each(function() {
                        var label = $(this).closest('div').find('label').text().trim();

                        $(this).attr('placeholder', label);
                    });
                }
                placeholders();

                var mainDiv =
                    ` <div class="all">
                            <div class="row gy-4">
                                    <div class="row d-flex justify-content-end main_img mt-5">
                                        <label class="form-label">@lang('lang.picture')</label>
                                        <div class="col-md-4 d-flex justify-content-end">
                                            <img class="rounded img-fluid image-preview"
                                                src="{{ asset('admin_assets/assets/images/faces/9.jpg') }}" alt="">
                                        </div>
                                        <div class="col-md-4">
                                            <input class="form-control image-input" name="profile_img[]" type="file" accept="image/*">
                                        </div>
                                    </div>
                                    <!-- Page Header Close -->


                                             <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label class="form-label mb-3">@lang('lang.fathername')</label>
                                                <input value="{{ @$id->fathername }}" name="fathername[]" type="text"
                                                    class="form-control urdu-fonts rtl-text" placeholder="">
                                        </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label class="form-label  mb-3">@lang('lang.name')</label>
                                                <input value="{{ @$id->name }}" name="name[]" required type="text"
                                                    class="form-control urdu-fonts rtl-text" placeholder="">
                                                <div id="name_error" class="float-right text-end urdu-fonts invalid-feedback">
                                                    @lang('validation.custom.required_name')
                                                </div>

                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label class="form-label  mb-3">@lang('lang.address')</label>
                                                <input name="address[]" value="{{ @$id->address }}" type="text"
                                                    class="form-control urdu-fonts rtl-text" placeholder="">
                                            </div>


                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label  class="form-label mb-3">@lang('lang.number')</label>
                                                <input name="phone_no[]" type="number" class="form-control urdu-numbers-format"  placeholder="">
                                            </div>

                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label  class="form-label  mb-3">@lang('lang.nic_no')</label>
                                                <input name="nic_no[]" type="number" class="form-control urdu-numbers-format"  placeholder="">
                                            </div>
                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label  class="form-label  mb-3">@lang('lang.cast')</label>
                                                <input name="cast[]" type="text" class="form-control urdu-fonts rtl-text"  placeholder="">
                                            </div>

                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 ">
                                                <label  class="form-label mb-3">@lang('lang.date')</label>
                                                <input name="date[]" type="date" value="{{ date('Y-m-d') }}" class="form-control" >
                                            </div>

                                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">
                                                <label  class="form-label mb-3">@lang('lang.previous_balance')</label>
                                                <input name="previous_balance[]" required type="text" class="form-control urdu-numbers-format"  placeholder="">
                                                <div id="previous_balance_error" class="float-right text-end urdu-fonts invalid-feedback">
                                                    @lang('validation.custom.previous_balance')
                                                </div>
                                            </div>
                                                <div class="mini-row  col-xl-3">
                                                    <button type="button"  class="btn btn-primary urdu-fonts delete_row" ><i class="remove fa-solid fa-minus" ></i></button>

                                                </div>
                            </div>
                    </div>`;

                $('#plusButton').click(function() {

                    $('#main').append(mainDiv);
                    placeholders();
                })
                $(document).on('click', '.delete_row', function() {
                    let row_item = $(this).parent().parent();
                    row_item.remove();

                })


                var table = $('#SupplierSimple').DataTable({
                    "columnDefs": [{
                        "targets": [2],
                        "className": "ltr-text"
                    }],
                    dom: 'Bltipr',

                    serverSide: true,
                    processing: true,
                    "order": [
                        [0, "desc"]
                    ],
                    "pageLength": 300,
                    "lengthMenu": [300, 500, 1000, 1500],
                    ajax: {
                        url: "{!! route('admin.supplier.simpletable') !!}",
                        data: function(d) {
                            d.from_date = $('.from_date').val(),
                                d.search_supplier = $('#search-supplier').val();
                        }
                    },
                    columns: [{
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'previous_balance',
                            name: 'previous_balance'
                        },

                        {
                            data: 'status',
                            name: 'status'
                        },
                        {
                            data: 'record_created',
                            name: 'record_created'
                        },
                        {
                            data: 'action',
                            name: 'action'
                        },

                    ]

                })
                $('#search-supplier').keyup(function() {

                    table.draw()
                })
                $('.from_date').change(function() {
                    table.draw()
                })
                $('#resetButton').on('click', function() {
                    $('.from_date').val('');
                    $('#search-supplier').val('');
                    table.ajax.reload();
                });
            });
        </script>
    @endpush
@endsection
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="7f6213e265ae82fb5d1f4bfb-|49" defer></script>