@extends('layouts.app', ['title' => __('Templates')])
@section('admin_title')
{{ __('POS Templates') }}
@endsection
@section('content')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<div class="header bg-gradient-primary pb-8 pt-5 pt-md-5">
</div>
<div class="container-fluid mt--7">
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col-7">
                            <h3 class="mb-0">{{ __('POS Templates List') }}</h3>
                        </div>
                        <div class="col-5 text-right">
                            <a href="{{ route('admin.pos.create') }}" class="btn btn-sm btn-primary">{{ __('Add POS Template') }}</a>
                            <a href="javascript:void(0);" class="btn btn-sm btn-primary" id="editCustomerBtn">{{ __('Edit POS Template') }}</a>
                            <a href="javascript:void(0);" class="btn btn-sm btn-danger" id="deleteCustomerBtn">{{ __('Delete POS Template') }}</a>

                        </div>
                    </div>
                </div>
                <div class="col-12">
                    @include('partials.flash')
                </div>
                <div class="table-responsive">
                    <table class="table align-items-center table-flush">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">{{ __('Template Name') }}</th>
                                <th scope="col">{{ __('Image') }}</th>
                                <th scope="col">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($templates as $category)
                            <tr>
                                <td>
                                    <input type="checkbox" name="selected_customer" class="customer-radio" value="{{ $category->id }}">
                                </td>
                                <td>{{ $category->name }}</td>
                                <td>
                                    <img src="{{ asset("images/". $category->image) }}" width="200" height="100" alt="" class="image-fluid">
                                </td>
                                <td>
                                    @if($category->is_active == 1)
                                    <span class="badge badge-success">{{ __('Active') }}</span>
                                    @else
                                    <span class="badge badge-warning">{{ __('Not active') }}</span>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>

                    </table>
                </div>
                <div class="card-footer py-4">
                    <nav class="d-flex justify-content-end" aria-label="...">
                    </nav>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>
@endsection
@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).on('change', '.customer-radio', function () {
        $('.customer-radio').not(this).prop('checked', false);
    });
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('.table').DataTable({
            "columnDefs": [{
                "orderable": false,
                "targets": -1 // Target the last column (Action column)
            }]
        });
    });
    $("[data-target='#modal-edit-category']").on('click', function() {
        var id = $(this).attr('data-id');
        var name = $(this).attr('data-name');
        $('#cat_name').val(name);
        var route = "{{ route('owner.category.update', ':id') }}";
        route = route.replace(':id', id);
        $("#form-edit-category").attr("action", route);
    })
</script>
<script>
    function confirmDelete(categoryId) {
        // Show the confirmation dialog
        Swal.fire({
            title: '{{ __('
            Are you sure ? ') }}',
            text : '{{ __('
            This will delete the category and all related data.This action is irreversible.
            ') }}',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: '{{ __('
            Yes,
            delete it!') }}',
            cancelButtonText: '{{ __('
            Cancel ') }}',
            reverseButtons: true
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, redirect to the delete route
                window.location.href = "{{ route('owner.category.remove', ':id') }}".replace(':id',
                    categoryId);
            }
        });
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function() {
        // Get selected customer ID
        function getSelectedCustomerId() {
            return $('input[name="selected_customer"]:checked').val();
        }

        // Edit Customer
        $('#editCustomerBtn').click(function() {
            let customerId = getSelectedCustomerId();
            if (!customerId) {
                Swal.fire("Warning", "Please select a Template first!", "warning");
                return;
            }
            window.location.href = "/pos/edit/" + customerId;
        });

        // Delete Customer with SweetAlert Confirmation
        $('#deleteCustomerBtn').click(function() {
            let customerId = getSelectedCustomerId();
            if (!customerId) {
                Swal.fire("Warning", "Please select a Template first!", "warning");
                return;
            }

            Swal.fire({
                title: "Are you sure?",
                text: "This Template will be permanently deleted!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "/pos/delete/" + customerId,
                        type: "POST",
                        data: {
                            _token: "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            Swal.fire("Deleted!", "The Template has been deleted.", "success")
                                .then(() => location.reload());
                        },
                        error: function() {
                            Swal.fire("Error", "Something went wrong.", "error");
                        }
                    });
                }
            });
        });
    });
</script>

@endsection