@extends('layout')

@section('h4-page', __('promotions'))

@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"
                        href="{{ route('promotions.create') }}" 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>{{ __('Image') }}</th>
                            <th>{{ __('External Link') }}</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> <img src="{{ $item->pathImg() }}" alt="logo" width="200"> </td>
                                <td>{{ $item->external_link }} </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="4" class="text-center">{{ __('NoDataFound') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </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">{{ __('promotions') }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <ul class="list-group" id="modalDiv">
                        <li class="list-group-item border-0 px-0">
                            <div>
                                <div class="d-flex justify-content-center mb-4">
                                    <img id="selectedAvatar" src="{{ asset('img/placeholder-avatar.png') }}"
                                         style="width: 200px; height: 200px; object-fit: cover;"
                                        alt="example placeholder" />
                                </div>
                                <div class="d-flex justify-content-center">
                                    <div data-mdb-ripple-init class="btn btn-primary btn-rounded">
                                        <label class="form-label text-white m-1"
                                            for="customFile2">{{ __('ChooseFile') }}</label>
                                        <input type="file" class="form-control d-none" id="customFile2"
                                            onchange="displaySelectedImage(event, 'selectedAvatar')" accept="image/*"
                                            name="img" />
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="external_link" class="form-label">{{ __('External Link') }}</label>
                                <input type="text" class="form-control" name="external_link" id="external_link">
                            </div>
                        </li>
                        <li class="list-group-item border-0 px-0">
                            <div class="form-group ps-0">
                                <label for="external_link" class="form-label">{{ __('Pin') }}</label>
                                <input type="checkbox" name="is_pin" id="is_pin" onclick="changePin(this)">
                                <input type="text" class="d-none" name="pin" id="pin" 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 displaySelectedImage(event, elementId) {
            const selectedImage = document.getElementById(elementId);
            const fileInput = event.target;

            if (fileInput.files && fileInput.files[0]) {
                const reader = new FileReader();

                reader.onload = function(e) {
                    selectedImage.src = e.target.result;
                };

                reader.readAsDataURL(fileInput.files[0]);
            }
        }
    </script>
    <script>
        function changePin(e) {
            var pin = document.getElementById("pin");
            if (pin.value == 0) {
                pin.value = 1;
            } else {
                pin.value = 0;
            }
        }

        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('promotions.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() {
                var external_link = document.getElementById("external_link");
                var image = document.getElementById("selectedAvatar");
                var is_pin = document.getElementById("is_pin");
                var pin = document.getElementById("pin");
                is_pin.checked = false;
                pin.value = 0;
                image.src = "{{ asset('img/placeholder-avatar.png') }}";
                external_link.value = "";
                idModel = 0;
                statusModel = "create";
            })
            $('.editModel').on("click", function() {
                var url_edit = "{{ route('promotions.edit', ':id') }}";
                $.ajax({
                    type: "GET",
                    url: url_edit.replace(":id", $(this).data("id")),
                    success: async function(response) {
                        var data = response;
                        console.log(data)
                        var external_link = document.getElementById("external_link");
                        external_link.value = data.external_link;
                        var image = document.getElementById("selectedAvatar");
                        image.src = data.image;
                        var is_pin = document.getElementById("is_pin");
                        var pin = document.getElementById("pin");
                        is_pin.checked = data.pin == 1 ? true : false;
                        pin.value = data.pin;
                        idModel = data.id;
                        statusModel = "update";
                        $('#exampleModal').modal("show");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        Swal.fire({
                            title: '{{ __('Error') }}',
                            text: "{{ __('Cannot save value.') }}",
                            confirmButtonText: '{{ __('OK') }}',
                            icon: 'error',
                        });
                    },
                });

            });
            $("#updateModel").on("click", function() {
                if (statusModel == "create") {
                    var url = "{{ route('promotions.store') }}";
                    var formData = new FormData();
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    formData.append('img', $('#customFile2')[0].files[0]);
                    formData.append('_token', "{{ csrf_token() }}");
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            console.log(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('promotions.update', ':id') }}"
                    var formData = new FormData();
                    var inputs = document.querySelectorAll('#modalDiv input[type=text]');
                    inputs.forEach(function(input) {
                        formData.append(input.name, input.value);
                    });
                    formData.append('img', $('#customFile2')[0].files[0]);
                    formData.append('_token', "{{ csrf_token() }}");
                    formData.append('_method', "PUT");
                    $.ajax({
                        type: "POST",
                        url: url.replace(":id", idModel),
                        data: formData,
                        processData: false, // Prevent jQuery from processing the FormData
                        contentType: false, // Prevent jQuery from setting contentType
                        success: function(response) {
                            console.log(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',
                            });
                        },
                    });
                }
            });
        });
    </script>
@endsection