@extends('layout.app')
@section('title')
    {{ __('message.proxy') }}
@stop
@section('css')
    @if( LaravelLocalization::getCurrentLocale() == "ar")
        <!-- BEGIN: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css-rtl/vendors.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/dataTables.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/responsive.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/buttons.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css-rtl/tables/datatable/rowGroup.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
        <!-- END: Vendor CSS-->

        <!-- BEGIN: Page CSS-->
        <!-- END: Page CSS-->

        <style>
            @media(min-width: 576px){
                .course-model {
                    max-width: 1000px;
                }
            }
        </style>
    @else
        <!-- BEGIN: Vendor CSS-->
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/responsive.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css"
              href="{{ asset('app-assets/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css') }}">
        <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css') }}">
        <!-- END: Vendor CSS-->

        <!-- BEGIN: Page CSS-->
        <!-- END: Page CSS-->

        <style>
            @media(min-width: 576px){
                .course-model {
                    max-width: 1000px;
                }
            }
        </style>
    @endif
@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-9 col-12 mb-2">
                <div class="row breadcrumbs-top">
                    <div class="col-12">
                        <h2 class="content-header-title float-left mb-0">{{ __('message.proxy') }}</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{route("dashboard")}}">{{ __('message.dashboard') }}</a>
                                </li>
                                <li class="breadcrumb-item active">{{ __('message.proxy') }}
                                </li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <!-- meals list start -->
            <section class="app-meals-list">
                <!-- list section start -->
                <div class="card">
                    <div class="card-datatable table-responsive pt-0">
                @php
                $request = request()->all();
                @endphp

                                @isset($request["invalids"])
                            <div class="alert alert-danger p-2">
                                <ul>
                                    <h3>Invalid Proxy</h3>
                                @foreach ($request["invalids"] as $invalid)
                                    <li>{{ $invalid }}</li>
                                @endforeach
                                </ul>
                            </div>
                                @endisset

                                    @isset($request["duplicates"])
                                        <div class="alert alert-danger p-2">
                                            <ul>
                                        <h3>Duplicate Proxy</h3>
                                        @foreach ($request["duplicates"] as $duplicate)
                                            <li>{{ $duplicate }}</li>
                                        @endforeach
                                            </ul>
                                        </div>
                                    @endisset

                        </div>

                        <table class="proxy-list-table table">
                            <thead class="thead-light">
                            <tr>
                                <th>
                                    <div class="animated-checkbox">
                                        <label class="m-0">
                                            <input type="checkbox" id="record__select-all">
                                            <span class="label-text"></span>
                                        </label>
                                    </div>
                                </th>
                                <th>{{ __('message.proxy') }}</th>
                                <th>{{ __('message.group') }}</th>
                                <th>{{ __('message.created_by') }}</th>
                                <th>{{ __('message.status') }}</th>
                                <th>{{ __('message.action') }}</th>
                            </tr>
                            </thead>
                        </table>
                    </div>

                </div>
                <!-- list section end -->
            </section>





        </div>
    </div>

    <div class="modal fade" id="modals-import-excel">
        <div class="modal-dialog">
            <form method="post" action="{{ route('proxy.file-import') }}" id="excel_uploader" class="modal-content" enctype="multipart/form-data"
                  style="display: inline-block;">
                @csrf
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">{{__("message.import_excel_file")}}</h5>
                </div>
                <div class="modal-body flex-grow-1">

                    <div class="form-group">
                        <label for="file" class="form-label">{{ __('message.proxy') }}</label>
                        <input type="file" class="form-control" id="file" name="file">
                    </div>
                    <div class="form-group">
                        <select name="group" id="proxy_group" class="form-control ">
                            <option value="" disabled selected>Select</option>

                            <option value="new">New</option>

                        @isset($proxy_group)
                                @foreach($proxy_group as $proxy)
                            <option value="{{ $proxy->group}}">{{ $proxy->group}}</option>
                                @endforeach
                            @endisset
                        </select>
                    </div>

                    <div class="form-group add_new_option">
                        <label for="file" class="form-label">{{ __('message.add_new') }}</label>
                        <input type="text" class="form-control" id="file" name="add_new">
                    </div>
                    <div class="form-group">
                        <div class="progress">
                            <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success mr-1 data-submit">{{__("message.create")}}</button>
                    <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">{{__("message.cancel")}}
                    </button>
                </div>
            </form><!-- end of form -->
        </div>
    </div>
    <div class="modal fade" id="modals-delete-bulk">
        <div class="modal-dialog">
            <form method="post" action="{{route('proxy.bulkDelete')}}" class="modal-content" style="display: inline-block;">
                @csrf
                @method('delete')
                <input type="hidden" name="record_ids" id="record-ids" value="[]">

                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">@lang("message.delete_records")</h5>
                </div>
                <div class="modal-body flex-grow-1">
                    <h4>@lang("message.do_you_want_to_delete_the_selected")</h4>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger mr-1 data-submit">@lang("message.delete")</button>
                    <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">@lang("message.cancel")
                    </button>
                </div>
            </form><!-- end of form -->
        </div>
    </div>
    <div class="modal fade" id="modals-status">
        <div class="modal-dialog">
            <form method="post" action="{{route('proxy.bulkStatus')}}" class="modal-content" style="display: inline-block;">
                @csrf
                <input type="hidden" name="record_ids" id="record-ids-status" value="[]">

                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">@lang("message.status_of_update_factory")</h5>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="form-group">
                        <label for="formGroupExampleInput">{{__("message.status")}}</label>
                        <select name="status_1" id="" class="form-control">
                            <option value="1"> {{__("message.active")}}</option>
                            <option value="0"> {{__("message.not_active")}} </option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-danger mr-1 data-submit">@lang("message.save")</button>
                    <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">@lang("message.cancel")
                    </button>
                </div>
            </form><!-- end of form -->
        </div>
    </div>
@endsection

@section('js')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js') }}"></script>

    <!-- END: Page Vendor JS-->
    <!-- END: Page Vendor JS-->
    @php
        $user = auth()->user();
    @endphp
    <script>
        const role_create = @if($user->isAbleTo('proxy-create')) "" @else "d-none"  @endif ;
        const role_update = @if($user->isAbleTo('proxy-update')) "" @else "d-none"  @endif ;
        const role_delete = @if($user->isAbleTo('proxy-delete')) "" @else "d-none"  @endif ;



    </script>
    <script>
        const indexUrl = '{{route("proxy.index")}}';
        const creatUrl = '{{route("proxy.create")}}';
    </script>
    <!-- BEGIN: Page JS-->

    <!-- BEGIN: Page JS-->
{{--    <script src="{{ asset('app-assets/js/app.js') }}"></script>--}}

    <script src="{{ asset('app-assets/js/dt.js') }}?v=0.4"></script>
    <script src="https://unpkg.com/sweetalert2@7.18.0/dist/sweetalert2.all.js"></script>

    {{--     <script src="{{asset('app-assets/js/datatables.js')}}"></script> --}}
    <!-- END: Page JS-->
    <script>
        function deleteConfirmation(id) {
            swal.fire({
                title: `{{__("message.delete_from_proxy")}}`,
                icon: 'question',
                text: `{{__("message.are_you_sure")}}`,
                type: "warning",
                showCancelButton: !0,
                confirmButtonText: `{{__("message.yes")}}`,
                cancelButtonText: `{{__("message.no")}}`,
                reverseButtons: !0
            }).then(function (e) {
                if (e.value === true) {
                    let token = $('meta[name="csrf-token"]').attr('content');
                    let _url = `{{route('proxy.destroy')}}`;
                    $.ajax({
                        type: 'POST',
                        url: _url,
                        data: {"_token": "{{ csrf_token() }}","id": id},
                        success: function (resp) {
                            if (resp.success) {
                                swal.fire("Done!", resp.message, "success");
                                $('.proxy-list-table').DataTable().ajax.reload();
                            } else {
                                swal.fire("sorry!", resp.message, "error");
                            }
                        },
                        error: function (resp) {
                            swal.fire("Error!", 'Something went wrong.', "error");
                        }
                    });
                } else {
                    e.dismiss;
                }
            }, function (dismiss) {
                return false;
            })
        }
    </script>
    <script>
        $(function () {
            $(document).ready(function () {
                $('#excel_uploader').ajaxForm({
                    beforeSend: function () {
                        var percentage = '0';
                    },
                    uploadProgress: function (event, position, total, percentComplete) {
                        var percentage = percentComplete;
                        $('.progress .progress-bar').css("width", percentage+'%', function() {
                            return $(this).attr("aria-valuenow", percentage) + "%";
                        })
                    },
                    complete: function (xhr) {
                        console.log('File has uploaded');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            const newOptionInput = $(".add_new_option");
            newOptionInput.hide();

            $("#proxy_group").on("change", function() {
                const selectedOption = $(this).val();
                const newOptionInput = $(".add_new_option");

                if (selectedOption === "new") {
                    newOptionInput.show();
                } else {
                    newOptionInput.hide();
                }
            });
        });
    </script>

@stop