@extends('vendor.merchants.layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/order-popup.css') }}">
@endpush

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize pe-3 px-3">{{ __('voyager::seeders.data_types.store.plural') }}</h6>
                        @if(voyager_user()->hasPermission('add_stores'))
                            <button data-bs-toggle="modal" data-bs-target="#createStoresModal" class="btn bg-gradient-success text-capitalize" style="float:{{ app()->getLocale() == 'ar' ? 'left' : 'right' }}; text-align: center;"><i class="material-icons opacity-10">add</i>{{ __('voyager::generic.add_new') }}</button>
                        @endif
                    </div>
                </div>
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive p-0 p-5">
                        <table class="table align-items-center mb-0" id="dataTable">
                            <thead>
                            <tr>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.store_name') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.store_platform') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.merchant') }}</th>
                                <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ __('voyager::seeders.data_rows.created_at') }}</th>
                                <th class="text-secondary opacity-7"></th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Single delete modal--}}
    <div class="modal modal-danger fade" tabindex="-1" id="delete_modal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title">
                        <i class="material-icons opacity-10">delete</i>

                        {{ __('voyager::generic.delete_question') }} {{ __('voyager::seeders.data_types.store.singular') }}?
                    </h4>
                </div>
                <div class="modal-footer">
                    <form action="#" id="delete_form" method="POST">
                        {{ method_field('DELETE') }}
                        {{ csrf_field() }}
                        <input type="submit" class="btn btn-danger pull-right delete-confirm" value="{{ __('voyager::generic.delete_confirm') }}">
                    </form>
                    <button type="button" class="btn btn-dark pull-right cancel" data-dismiss="modal">{{ __('voyager::generic.cancel') }}</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="createStoresModal" tabindex="-1" role="dialog" aria-labelledby="createStoresLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createStoresModalLabel">{{ __('voyager::generic.add_new') }}</h5>
                    <button type="button" class="close" data-bs-dismiss="modal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="add_stores_form">
                    {{ csrf_field() }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-4">
                                {{ __('voyager::seeders.data_rows.store_name') }}
                            </div>
                            <div class="col-8">
                                <input type="text" class="form-control" id="store_name" name="store_name" placeholder="{{ __('voyager::seeders.data_rows.store_name') }}" value="{{ old('store_name', $dataTypeContent->store_name ?? '') }}">

                                @error('store_name')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-4">
                                {{ __('voyager::seeders.data_rows.store_platform') }}
                            </div>
                            <div class="col-8">
                                <select class="form-control" name="store_platform" required>
                                    @foreach(\App\Models\Store::$store_platform as $platform)
                                        <option value="{{ $platform }}" @if(old('store_platform') == $platform) selected="selected" @endif>{{ $platform }}</option>
                                    @endforeach
                                </select>

                                @error('store_platform')
                                <div class="text-danger error-massage">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn bg-gradient-success">{{ __('voyager::generic.save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('js')
    <!-- DataTables -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.4.1/css/rowReorder.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/rowreorder/1.4.1/js/dataTables.rowReorder.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>

    <script src="{{ asset('js/datatable-browse.js') }}" type="text/javascript"></script>

    <script type="application/javascript">
        $(document).ready(function () {
            /**
             * custom_datatable function
             * var url it's Ajax route
             * var Columns datatables columns name and received data
             * var del destroy route
             * var load_img path of loading image
             * */

            var url = "{{ route('stores.ajax') }}";
            var columns = [
                {data: 'store_name', name: 'store_name'},
                {data: 'store_platform', name: 'store_platform'},
                {data: 'merchant', name: 'merchant'},
                {data: 'created_at', name: 'created_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ];

            var del = '{{ route('stores.destroy', ['id' => '__id']) }}';

            custom_datatable(url, columns,'dataTable', del,"{{ Auth::user()->locale??'ar' }}");
        });

    </script>

    <script>
        $('#add_stores_form').submit(function(e) {
            e.preventDefault();
            var submit = $(this).find("[type=submit]");

            // Serialize the form data
            let form = $('#add_stores_form')[0];
            const formData = new FormData(form);
            // Send an AJAX request
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: "{{ route('stores.store') }}",
                type: "POST",
                data : formData,
                dataType:"JSON",
                processData : false,
                contentType:false,

                success: function(response) {

                    if (response.errors) {
                        var errorMsg = '';
                        $.each(response.errors, function(field, errors) {
                            var field_parent = $('#'+field).parent();
                            $.each(errors, function(index, error) {
                                // errorMsg += error + '<br>';
                                if(field_parent.hasClass( "error" ))
                                {
                                    field_parent.find('.error-massage').remove( ".error-massage" );
                                }

                                field_parent.addClass('error')
                                field_parent.append(`
                                        <div class="text-danger error-massage text-right">`+error+`</div>
                                    `)
                            });
                        });
                    } else {
                        $('.error-massage').remove();
                        var data = response.data;

                        toastr.success(response.success)

                        window.location.reload();
                    }
                    submit.prop("disabled", false);
                },
                beforeSend: function(){
                    submit.attr("value", "Loading...");
                    submit.prop("disabled", true);
                },
                error: function(xhr, status, error) {
                    toastr.error('An error occurred: ' + error)
                }

            });

        });
    </script>

    <script>
        $(document.body).on('click', '.loadModal, [data-invoke~=modal]', function (e) {
            var loadUrl = $(this).data('href'),
                cacheResult = $(this).data('cache') === 'on',
                $button = $(this);

            $('.modal').remove();
            $('.modal-backdrop').remove();
            $('html').addClass('working');

            $.ajax({
                url: loadUrl,
                data: {},
                localCache: cacheResult,
                dataType: 'html',
                success: function (data) {

                    $('body').append(data);

                    var $modal = $('.modal');

                    $modal.modal({
                        'backdrop': 'static'
                    });

                    $modal.modal('show');

                    $modal.on('hidden.bs.modal', function (e) {
                        // window
                        location.hash = '';
                    });

                    $('html').removeClass('working');

                }
            }).done().fail(function (data) {
                $('html').removeClass('working');
                // showMessage(lang("whoops_and_error", {"code": data.status, "error": data.statusText}));
            });

            e.preventDefault();
        });
    </script>

    <script>
        $(document).on('click','.cancel',function (){
            $modal = $('.modal')

            $modal.modal('hide');
        })
    </script>
@endpush