@extends('layout')

@section('h4-page', __("store"))

@section('contents')
    <div class="row layout-top-spacing">
        <div class="col-lg-12 col-md-12 mb-md-0 mb-4">
            <div class="mb-3">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show " role="alert">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
                @if ($errors->any())
                    <div class="alert alert-danger mt-3 ">
                        <ul class="mb-0">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="d-flex justify-content-end">
                    <button class="btn btn-sm btn-info font-weight-bold text-xs createModel" data-bs-toggle="modal"
                        data-bs-target="#exampleModal">
                        {{__("create")}} +
                    </button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{__("Name")}}</th>
                            <th>{{__("Action")}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse (@$main as $key => $item)
                            <tr>
                                <td>{{ $main->currentPage() > 1 ? $main->perPage() * $main->currentPage() - $main->perPage() + $key + 1 : $key + 1 }}</td>
                                <td>{{ $item->name }}</td>
                                <td>
                                    <button class="btn btn-secondary editModel" data-id="{{ $item->id }}">{{__("edit")}}</button>
                                    <button class="btn btn-danger" onclick="deleteItem({{ $item->id }})">{{__("Delete")}}</button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center">{{__("NoDataFound")}}</td>
                            </tr>
                        @endforelse
                        <tr>

                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="d-flex justify-content-end pb-0">
                {{ @$main->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-white">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{__("store")}}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group">
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0 mb-3">
                                <label for="name" class="form-label">{{__("Name")}}<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" id="name">
                            </div>
                            {{-- <div class="form-group ps-0 mb-3">
                                <label for="branch" class="form-label">{{__("Branch")}}</label>
                                <input type="text" class="form-control" name="branch" id="branch">
                            </div> --}}
                            <div class="form-group ps-0 mb-3">
                                <label for="franchise" class="form-label">{{__("Franchise")}}<span class="text-danger">*</span></label>
                                <select name="franchise" id="franchise" class="form-control">
                                    <option value="0" selected>No</option>
                                    <option value="1">Yes</option>
                                </select>
                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="phone" class="form-label">{{__("Phone")}}</label>
                                <input type="text" class="form-control" name="phone" id="phone">                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="website" class="form-label">{{__("Website")}}</label>
                                <input type="text" class="form-control" name="website" id="website">                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="address" class="form-label">{{__("Address")}}</label>
                                <textarea class="form-control" name="address" id="address" rows="5"></textarea>
                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="branch_code" class="form-label">{{__("Branch Code")}}</label>
                                <input type="text" class="form-control" name="branch_code" id="branch_code">
                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="lat" class="form-label">{{__("Lat")}}<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="lat" id="lat" value="0">
                            </div>
                            <div class="form-group ps-0 mb-3">
                                <label for="long" class="form-label">{{__("Long")}}<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="long" id="long" value="0">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">{{__("close")}}</button>
                    <button type="button" class="btn btn-primary saveModel" id="updateModel" data-id="">{{__("save")}}</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        function deleteItem(id) {
            Swal.fire({
                title: '{{ __('Delete') }}',
                text: "{{ __('You want delete value ?') }}",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#5e72e4',
                cancelButtonColor: '#d33',
                confirmButtonText: '{{ __('Yes') }}',
                cancelButtonText: '{{ __('No') }}'
            }).then((result) => {
                if (result.isConfirmed) {
                    var is_url = "{{ route('store.destroy', ':id') }}";
                    $.ajax({
                        url: is_url.replace(':id', id),
                        type: 'DELETE',
                        data: {
                            _token: '{{ csrf_token() }}',
                            status: 0,
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{ __('Success') }}',
                                text: "{{ __('Delete value success.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot delete value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        }
                    });
                }
            })
        }
        $(document).ready(function() {
            var statusModel = "create";
            var idModel = 0;
            $(".createModel").on("click", function() {
                $("#name").val(null);
                $("#branch").val(null);
                $("#franchise").val(null);
                $("#address").val(null);
                $("#lat").val(null);
                $("#long").val(null);
                $("#phone").val(null);
                $("#website").val(null);
                $("#branch_code").val(null);
                idModel = 0;
                statusModel = "create";
            })
            $('.editModel').on("click", function() {
                var url_edit = "{{ route('store.edit', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;
                        console.log(data);
                        var name = $('#exampleModal').find("#name");
                        var branch = $('#exampleModal').find("#branch");
                        var franchise = $('#exampleModal').find("#franchise");
                        var address = $('#exampleModal').find("#address");
                        var lat = $('#exampleModal').find("#lat");
                        var long = $('#exampleModal').find("#long");
                        var phone = $('#exampleModal').find("#phone");
                        var website = $('#exampleModal').find("#website");
                        var branch_code = $('#exampleModal').find("#branch_code");
                        name.val(data.name);
                        branch_code.val(data.branch_code);
                        franchise.val(data.franchise);
                        address.val(data.address);
                        lat.val(data.lat);
                        long.val(data.long);
                        phone.val(data.phone);
                        website.val(data.website);
                        branch_code.val(data.branch_code);
                        idModel = data.id;
                        statusModel = "update";
                        $('#exampleModal').modal("show");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot edit value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });

            });
            $("#updateModel").on("click", function() {
                if (statusModel == "create") {
                    var url = "{{ route('store.store') }}"
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: {
                            _token: "{{ csrf_token() }}",
                            name: $("#name").val(),
                            branch: $("#branch").val(),
                            franchise: $("#franchise").val(),
                            address: $("#address").val(),
                            lat: $("#lat").val(),
                            long: $("#long").val(),
                            phone: $("#phone").val(),
                            website: $("#website").val(),
                            branch_code: $("#branch_code").val(),
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{__("Success")}}',
                                text: "{{__("Save value success.")}}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot save value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        },
                    });
                } else {
                    var url = "{{ route('store.update', ':id') }}"
                    $.ajax({
                        type: "POST",
                        url: url.replace(":id", idModel),
                        data: {
                            _token: "{{ csrf_token() }}",
                            _method: "PUT",
                            name: $("#name").val(),
                            branch: $("#branch").val(),
                            franchise: $("#franchise").val(),
                            address: $("#address").val(),
                            lat: $("#lat").val(),
                            long: $("#long").val(),
                            phone: $("#phone").val(),
                            website: $("#website").val(),
                            branch_code: $("#branch_code").val(),
                        },
                        success: function(response) {
                            Swal.fire({
                                title: '{{__("Success")}}',
                                text: "{{__("Save value success.")}}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'success',
                            }).then((result) => {
                                if (result.isConfirmed) {
                                    location.reload();
                                }
                            });
                        },
                        error: function(request, status, error) {
                            Swal.fire({
                                title: '{{ __('Error') }}',
                                text: "{{ __('Cannot save value.') }}",
                                confirmButtonText: '{{ __('OK') }}',
                                icon: 'error',
                            });
                        },
                    });
                }
            });
        });

        function setInputFilter(textbox, inputFilter, errMsg) {
            ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(
                function(event) {
                    textbox.addEventListener(event, function(e) {
                        if (inputFilter(this.value)) {
                            // Accepted value.
                            if (["keydown", "mousedown", "focusout"].indexOf(e.type) >= 0) {
                                this.classList.remove("input-error");
                                this.setCustomValidity("");
                            }

                            this.oldValue = this.value;
                            this.oldSelectionStart = this.selectionStart;
                            this.oldSelectionEnd = this.selectionEnd;
                        } else if (this.hasOwnProperty("oldValue")) {
                            // Rejected value: restore the previous one.
                            this.classList.add("input-error");
                            this.setCustomValidity(errMsg);
                            this.reportValidity();
                            this.value = this.oldValue;
                            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                        } else {
                            // Rejected value: nothing to restore.
                            this.value = "";
                        }
                    });
                });
        }
        setInputFilter(document.getElementById("lat"), function(value) {
            return /^-?\d*[.,]?\d*$/.test(value);
        }, "Must be a floating (real) number");
        setInputFilter(document.getElementById("long"), function(value) {
            return /^-?\d*[.,]?\d*$/.test(value);
        }, "Must be a floating (real) number");
    </script>
@endsection