@extends('layouts.admin')
@section('content')
<div class="col-9 main-dash-left">
    <div class="analytics">

        <div class="main-notification-messege">
            <div class="notifi-list d-flex">
                <h6>Variation Management</h6>
                <div class="dropdowns-inner-list d-flex">
                    <a class="add-notification-btn" href="{{route('admin.variation.create')}}">Add Variation</a>
                </div>
            </div>
            <div class="notification-table pt-0">
                <table class="table">
                    <thead>
                        <tr class="head-class-td">
                            <th>No.</th>
                            <th>Variation</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            @if(count($variation) > 0)
                            @foreach($variation as $index => $val)
                        <tr>
                            <td>{{$index + 1}}</td>
                            <td>{{$val->name}}</td>
                            <td>
                                <div class="upper-delete-btns d-flex">
                                    <a class="edit-btn-eye" href="{{route('admin.variation.edit',$val->id)}}">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a class="delete-btn-eye" href="javascript:void(0);" onclick="openDeleteModal('{{ $val->id }}')">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>
<div class="modal fade modal-delete-logout" id="deleteuser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="p-0 modal-body">
                <div class="inner-body-delete-logout">
                    <h4 id="delete-text">Are you sure you want to delete this Variation?</h4>
                    <div class="upper-btns-modal-pair">
                        <button type="button" data-bs-dismiss="modal" class="comn-modal-btns-transparent btn btn-primary">No</button>
                        <form id="delete-user-form" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" id="delete-user-id">
                            <button type="submit" class="comn-modal-btns-blue btn add-user">Yes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script>
    function openDeleteModal(id) {
        document.getElementById('delete-user-id').value = id;

        var myModal = new bootstrap.Modal(document.getElementById('deleteuser'));
        myModal.show();

        $('#delete-user-form').off('submit').on('submit', function(e) {
            e.preventDefault();

            var id = $('#delete-user-id').val();
            var formData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                id: id
            };

            $.ajax({
                url: "{{route('admin.variation.delete')}}",
                type: 'POST',
                data: formData,
                success: function(response) {
                    myModal.hide();
                    location.reload();
                },
                error: function(xhr, status, error) {
                    // On error, show an error message
                    alert('Something went wrong! Please try again later.');
                }
            });
        });
    }
</script>

@endsection