@extends('newDashboard.index')

@section('css')
    <link rel="stylesheet" href="{{ asset('metronic/css/data-table.css') }}">
    <!--     <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet"> -->
@endsection

@section('main-content')
    <div class="content-wrapper">
        <div class="page-header">
            <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                    <i class="mdi mdi-cards-variant menu-icon"></i>
                </span> {{ __('messages.Customers') }}
            </h3>
        </div>
        <div class="row">
            <div id="success_message"></div>
            @permission('sales-customers-create')
                <div class="buttons-container">
                    <button type="button" id="addcusbtn" class="btn btn-primary float-end showUsers" data-bs-toggle="modal"
                        data-bs-target="#AddCustomerModal">{{ __('messages.Add Customers Data') }}</button>
                </div>
            @endpermission
            <input type="hidden" name="hidden_page" id="hidden_page" value="1" />
            <input type="hidden" id="user-supplier" value="{{ route('customer.index') }}" />
            <input type="hidden" id="add-ajax-route" value="{{ route('customer.store') }}" />
            <input type="hidden" id="add-ajax-route-vacations" value="{{ route('user.add.vacations') }}" />
            <input type="hidden" id="update-ajax-route" value="{{ route('customer.update') }}" />
            <input type="hidden" id="delete-ajax-route" value="{{ route('customer.destroy') }}" />


            <div class="table-responsive customscroll">
                <table class="table datatable text-center" id="table">
                    <div class="form-group mb-3 col-md-3 col-8 px-4">
                        <div class="d-flex align-items-center gap-2">
                            <label class="" for=""> {{ __('messages.Customers') }}:</label>
                            <select id="supplierSelect" class="js-example-disabled-results  form-control">
                                <option value="0">
                                    {{ __('validation.Select', ['attribute' => __('messages.Customers')]) }}</option>
                                @foreach ($customers as $customers)
                                    <option value="{{ $customers->id }}">{{ $customers->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <thead>
                        <tr>
                            <th>{{ __('messages.ID') }}</th>
                            <th>{{ __('messages.Name') }}</th>
                            <th>{{ __('messages.Address 1') }}</th>
                            <th>{{ __('messages.Cridet limit') }}</th>
                            <th>{{ __('messages.Curreny credit') }}</th>
                            <th>{{ __('messages.Phone') }}</th>
                            <th>{{ __('messages.Email') }}</th>
                            <th>{{ __('messages.VIP Customer') }}</th>

                            <th></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- start Add Modal --}}
    <div class="modal fade" id="AddCustomerModal" aria-labelledby="AddCustomerModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">

                    <h5 class="modal-title" id="AddCustomerModalLabel">{{ __('messages.Add Customers Data') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

                </div>
                <div class="modal-body row">

                    <ul id="save_msgList"></ul>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                            href="#pills-health" role="tab" aria-controls="pills-home"
                                            aria-selected="true">{{ __('messages.Add Customer Data') }}</a>
                                    </li>
                                </ul>

                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-health" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="row">
                                            <div class="form-group mb-3 col-md-6">
                                                <label class="required" for=""> {{ __('messages.Name') }}</label>
                                                <input type="text" required class="name form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Email') }}</label>
                                                <input type="email" required class="email form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label class="required"
                                                    for="">{{ __('messages.Address 1') }}</label>
                                                <input type="text" required class="adress1 form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Address 2') }}</label>
                                                <input type="text" required class="adress2 form-control">
                                            </div>

                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Cridet limit') }}</label>
                                                <input type="number" required class="cridetLimit form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Curreny credit') }}</label>
                                                <input type="number" required class="currenyCredit form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-12 select-transaction">
                                                <label class="required"
                                                    for="Role">{{ __('messages.Transaction') }}</label>
                                                <select class=" form-control select2 transaction_id ">
                                                    <option value="">
                                                        {{ __('validation.Select', ['attribute' => __('messages.Transaction')]) }}
                                                    </option>
                                                    @foreach ($transactions as $transaction)
                                                        <option value="{{ $transaction->id }}">
                                                            {{ $transaction->name }}</option>
                                                    @endforeach

                                                </select>
                                            </div>
                                            <div class="form-group mb-3 col-md-12">
                                                <label class="required" for="">{{ __('messages.Phone') }}</label>
                                                <input type="number" required class="phone form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-3 p-0 position-relative">
                                                <div class="form-check">
                                                    <input type="checkbox"
                                                        class="form-check-input position-absolute customLeftCheck"
                                                        id="vipCheckbox" name="option1" value="something">
                                                    <label class="form-check-label"
                                                        for="check1">{{ __('messages.VIP Customer') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary"
                                            data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                        <button type="button"
                                            class="btn btn-primary add">{{ __('messages.Save') }}</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- end add Modal --}}

    {{-- edit Modal --}}
    <div class="modal fade" id="editCustomerModal" tabindex="-1" aria-labelledby="editCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCustomerModalLabel">{{ __('messages.Edit & Update Customers Data') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">


                    <ul id="update_msgList"></ul>
                    <input type="hidden" id="id" />
                    <input type="hidden" id="edit-ajax-route" value="{{ route('customer.edit.data') }}" />

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                            href="#pills-Users" role="tab" aria-controls="pills-home"
                                            aria-selected="true">{{ __('messages.Customer data') }}</a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-Users" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="row">
                                            <div class="form-group mb-3 col-md-6">
                                                <label class="required" for=""> Name</label>
                                                <input type="text" id="name" required class="form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Email') }}</label>
                                                <input type="text" required class=" form-control" id="emailUbdate">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label class="required"
                                                    for="">{{ __('messages.Address 1') }}</label>
                                                <input type="text" id="adress1Ubdate" required class="form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Address 2') }}</label>
                                                <input type="text" required class=" form-control" id="adress2Ubdate">
                                            </div>

                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Cridet limit') }}</label>
                                                <input type="number" id="cridetLimitUbdate" required
                                                    class="form-control">
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Curreny credit') }}</label>
                                                <input type="number" required class=" form-control"
                                                    id="currenyCreditUbdate">
                                            </div>

                                            <div class="form-group mb-3 col-md-12">
                                                <label class="required" for="">{{ __('messages.Phone') }}</label>
                                                <input type="number" required class=" form-control" id="phoneUbdate">
                                            </div>
                                            <div class="form-group mb-3 col-md-3 p-0 position-relative">
                                                <div class="form-check">
                                                    <input type="checkbox"
                                                        class="form-check-input position-absolute customLeftCheck"
                                                        id="vipCheckboxUbdate" name="option1" value="something">
                                                    <label class="form-check-label"
                                                        for="check1">{{ __('messages.VIP Customer') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                    <button type="submit"
                                        class="btn btn-primary update">{{ __('messages.Update') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Edn- Edit Modal --}}
    {{-- SHOW Modal --}}
    <div class="modal fade" id="ShowCustomerModal" tabindex="-1" aria-labelledby="ShowCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="ShowCustomerModalLabel">{{ __('messages.Edit & Update Customers Data') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body row">


                    <ul id="update_msgList"></ul>
                    <input type="hidden" id="id" />
                    <input type="hidden" id="edit-ajax-route" value="{{ route('customer.edit.data') }}" />

                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 mx-auto">
                                <ul class="nav nav-pills nav-pills-custom justify-content-center" id="pills-tab"
                                    role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                            href="#pills-Users" role="tab" aria-controls="pills-home"
                                            aria-selected="true">{{ __('messages.Customer data') }}</a>
                                    </li>
                                </ul>
                                <div class="tab-content tab-content-custom-pill" id="pills-tabContent">
                                    <div class="tab-pane fade show active" id="pills-Users" role="tabpanel"
                                        aria-labelledby="pills-home-tab">
                                        <div class="row">
                                            <div class="form-group mb-3 col-md-6">
                                                <label for=""> Name</label>
                                                <input type="text" id="nameShow" required class="form-control"
                                                    disabled>
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Email') }}</label>
                                                <input type="text" required class=" form-control" id="emailShow"
                                                    disabled>
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Address 1') }}</label>
                                                <input type="text" id="adress1Show" required class="form-control"
                                                    disabled>
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Address 2') }}</label>
                                                <input type="text" required class=" form-control" id="adress2Show"
                                                    disabled>
                                            </div>

                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Cridet limit') }}</label>
                                                <input type="number" id="cridetLimitShow" required class="form-control"
                                                    disabled>
                                            </div>
                                            <div class="form-group mb-3 col-md-6">
                                                <label for="">{{ __('messages.Curreny credit') }}</label>
                                                <input type="number" required class=" form-control"
                                                    id="currenyCreditShow" disabled>
                                            </div>

                                            <div class="form-group mb-3 col-md-12">
                                                <label for="">{{ __('messages.Phone') }}</label>
                                                <input type="number" required class=" form-control" id="phoneShow"
                                                    disabled>
                                            </div>
                                            <div class="form-group mb-3 col-md-3 p-0 position-relative">
                                                <div class="form-check">
                                                    <input type="checkbox"
                                                        class="form-check-input position-absolute customLeftCheck"
                                                        id="vipCheckboxShow" name="option1" value="something">
                                                    <label class="form-check-label"
                                                        for="check1">{{ __('messages.VIP Customer') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-secondary"
                                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Edn- SHOW Modal --}}

    {{-- Delete Modal --}}
    <div class="modal fade" id="DeleteCustomerModal" tabindex="-1" aria-labelledby="DeleteCustomerModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="DeleteCustomerModalLabel">{{ __('messages.Delete Customer Data') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h4>{{ __('messages.Confirm to Delete Data ?') }}</h4>
                    <input type="hidden" id="deleteing_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                    <button type="button"
                        class="btn btn-danger delete_Category">{{ __('messages.Yes Delete') }}</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End - Delete Modal --}}
@endsection
@section('scripts')
    <script>
        var translations = {
            'ID': '{{ __('messages.ID') }}',
            'Name': '{{ __('messages.Name') }}',
            'Address 1': '{{ __('messages.Address 1') }}',
            'Cridet limit': '{{ __('messages.Cridet limit') }}',
            'Curreny credit': '{{ __('messages.Curreny credit') }}',
            'Phone': '{{ __('messages.Phone') }}',
            'Email': '{{ __('messages.Email') }}',
            'VIP Customer': '{{ __('messages.VIP Customer') }}',
            'Address 2': '{{ __('messages.Address 2') }}',
            'Customers': '{{ __('messages.Customers') }}',

        };
    </script>
    <script src="{{ asset('metronic/js/pages/customer.js') }}"></script>
@endsection