@extends('admin.master')
@section('title')
    {{ 'View Template' }}
@endsection
@section('styles')
    <style>
        .qr-card {
            border: 1px solid transparent;
            transition: all 0.3s ease-in-out;
        }

        .qr-card:hover {
            border: 1px solid #c7c7c7;
        }

        .image-qr {
            min-width: 100px;
            max-width: 100px;
            width: 100px;
            height: 100px;
        }

        .shadow-custom:hover {
            box-shadow: 6px 6px 5px -1px #8b89894a;
            /* transition: 0.5s; */
        }

        .fix-height {
            min-height: 12em;
            /* max-height: 171px; */
        }

        .title-overflow {
            white-space: nowrap;
            width: 8em;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .url-overflow {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .alert {
            padding: 15px;
            background-color: #4CAF50; /* Green */
            color: white;
            margin-bottom: 15px;
            opacity: 1;
            transition: opacity 0.6s; /* 600ms to fade out */
        }

        .alert.hide {
            opacity: 0;
            transition: opacity 0.6s; /* 600ms to fade out */
        }
    </style>
@endsection
@section('template')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3 create-button">
            <a class="btn btn-primary" href="{{route('template.create')}}" type="button">Create Template</a>
        </div>
    </div>
    <br>
    @if(session()->has('success'))
        <div class="alert alert-success" id="success-alert">
            {{ session()->get('success') }}
        </div>
    @endif
    <div class="card">
        <div class="card-body">
            <div class="col-12 table-responsive">
                <table class="table table-bordered user_datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Category</th>
                            <th>Image</th>
                            <th>Thumbnail Image</th>
                            <th>Image Height</th>
                            <th>Image Width</th>
                            <th>QR X</th>
                            <th>QR Y</th>
                            <th>QR Height</th>
                            <th>QR Width</th>
                            <th width="100px">Edit</th>
                            <th width="100px">Delete </th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
   <script type="text/javascript">
    $(function () {
        var table = $('.user_datatable').DataTable({
            processing: true,
            serverSide: true,
            order: [ [0, 'desc'] ],
            ajax: "{{ route('template.index') }}",
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                {data: 'title', name: 'title'},
                {data: 'category_id', name: 'category_id'},
                {data: 'card_image', name: 'card_image'},
                {data: 'thumbnail_image', name: 'thumbnail_image'},
                {data: 'image_height', name: 'image_height'},
                {data: 'image_width', name: 'image_width'},
                {data: 'qr_x', name: 'qr_x'},
                {data: 'qr_y', name: 'qr_y'},
                {data: 'qr_height', name: 'qr_height'},
                {data: 'qr_width', name: 'qr_width'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
                {data: 'delete', name: 'delete', orderable: false, searchable: false},
            ]
        });
    });

    $(document).on('click', '#deletebtn', function(e) {
		e.preventDefault();
		var uuid = $(this).attr('data-id');
		var url = "{{ route('admin.template.delete') }}";
		Swal.fire({
			title: 'Are you sure?',
			text: "You want to delete this?",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajax({
					url: url,
					type: 'POST',
					data: {
						id: uuid,
						_token: "{{ csrf_token() }}"
					},
					success: function(response) {
						if (response.status == 200) {
							Swal.fire(
								'Deleted!',
								'Your item has been deleted.',
								'success'
							).then((result) => {
								if (result.isConfirmed) {
									var ViewAllUrl = "{{ route('template.index') }}";
									window.location.href = ViewAllUrl;
                                }
							});
						}
					},
					error: function(xhr, status, error) {
						Swal.fire(
							'Error!',
							'An error occurred while deleting the item.',
							'error'
						);
					}
				});
			}
		});
	});

    document.addEventListener('DOMContentLoaded', function () {
        var alert = document.getElementById('success-alert');
        if (alert) {
            setTimeout(function () {
                alert.classList.add('hide');
            }, 3000); // 3000ms = 3 seconds
        }
    });
</script>
@endsection