@extends('admin.master')
@section('title')
    {{ 'Add Template' }}
@endsection
<style>
    .dataTables_length {
        margin-left: 20px;
    }

    .dataTables_info {
        margin-left: 20px;

    }

    .dataTables_filter {
        display: flex;
        justify-content: flex-end;
    }

    .dataTables_filter label {
        margin-right: 20px;

    }

    .dataTables_wrapper .row {
        --bs-gutter-x: 0 !important;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .dataTables_paginate {
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        margin-top: 20px;
    }

    .dataTables_wrapper {
        width: 100%;
        border-collapse: collapse;
        padding-inline: 20px !important;
        table-layout: fixed !important;

        /* padding-inline: 20px ; */
    }

    .dataTables_length label select {
        width: 40px;
        height: 40px;
        display: inline-block;
    }

    /* .table-responsive {
        overflow-x: auto; */
    /* Add additional styles as needed */
    /* } */

    /* Responsive table layout */
    .qr-table {
        width: 100% !important;
        table-layout: fixed !important;
        /* Prevent individual column widths from affecting layout */
    }

    input[type="color"] {
        border: none;
        padding: 0;
        width: 30px;
        /* Adjust this as needed */
        height: 30px;
        /* Adjust this as needed */
        border-radius: 50%;
        /* Make it round */
        cursor: pointer;
    }
    .hideClass{
        display:none !important;
    }
</style>
@section('template')
<div class="container-xxl flex-grow-1 container-p-y">
    <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-bolder">Create Template</h4>
    <div class="row">
        <div class="col-xl">                
            <div class="card mb-4">
                <div class="card-body">
                    <div class="hideClass alert alert-success success_msg msg_padding" role="alert">
                        Test
                    </div>
                    <div class="hideClass alert alert-danger danger_alert_msg msg_padding" role="alert">
                        Test
                    </div>
                    <div id="step1">
                        <h5>Basic Details</h5>
                        <form id="insertForm" method="POST" action="{{route('template.store')}}" enctype='multipart/form-data'>
                            @csrf
                            @include('admin.templates.form')
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('script')
<script>
</script>
<script src="{{ asset('assets/js/qrcodegenerator.js') }}"></script>

<script>
    var currentRequest = null;
    $("#insertForm").validate({
        rules: {
            title : 'required',
            category_id : 'required',
            image_width : 'required',
            image_height : 'required',
            qr_width : 'required',
            qr_height : 'required',
            qr_x : 'required',
            qr_y : 'required',
            card_image : 'required',
            thumbnail_image : 'required',
        },
        messages: {
            title : 'Title field is required',
            category_id : 'Category field is required',
            image_width : 'Image width field is required',
            image_height : 'Image height field is required',
            qr_width : 'Qr width field is required',
            qr_height : 'Qr height field is required',
            qr_x : 'Qr x required',
            qr_y : 'Qr y required',
            card_image : 'Card image is required',
            thumbnail_image : 'Thumbnail image is required',
        },

        submitHandler: function(form) {
            var formData = new FormData(form);

            currentRequest = jQuery.ajax({
                url: "{{ route('template.store') }}",
                type: "POST",
                data: formData,
                dataType: 'JSON',
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                beforeSend: function() {
                    if (currentRequest != null) {
                        currentRequest.abort();
                    }
                },
                success: function(data) {
                    if (data.status == '1') {
                        Swal.fire({
                            title: "Success",
                            text: 'Template added successfully',
                            icon: "success",
                        }).then(function() {
                            window.location.href = "{{ route('template.index') }}";
                        });
                    } else {
                        Swal.fire({
                            title: "Error",
                            text: 'Something went wrong!',
                            icon: "error",
                        }).then(function() {
                            $('#insertForm')[0].reset();
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        title: "Error",
                        text: 'Something went wrong: ' + xhr.status + ' ' + error,
                        icon: "error",
                    });
                }
            });
        }
    });
</script>
@endsection