@extends('store.layout.main')

@section('style')
    <style>
        .invoice-card {
            border: 1px solid #ddd;
            transition: 0.2s;
            height: 100%;
            position: relative;
        }

        .invoice-card:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
            transform: translateY(-2px);
        }

        .invoice-card:hover .preview-scale {
            transform: scale(0.45);
        }

        .invoice-preview {
            background: #fff;
            height: 220px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .preview-scale {
            transform: scale(0.35);
            transform-origin: top center;
            width: 800px;
            height: 900px;
            /* Add smooth transition */
            transition: transform 0.3s ease-in-out;
        }

        .preview-frame {
            width: 800px;
            height: 900px;
            border: none;
            pointer-events: none;
            /* prevents scrolling */
        }

        .default-layout {
            border: 2px solid #28a745;
            box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.15);
        }

        .default-badge {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #28a745;
            color: #fff;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 3px;
        }
    </style>
@endsection

@section('title', 'Invoice Layouts')

@section('page-header')
    <x-store.page-header pretitle="Store" title="Invoice Layouts" back-route="store.dashboard" :other-btn="[
        [
            'href' => route('store.invoice-layout.add'),
            'text' => 'Add Layout',
            'class' => 'btn btn-success',
            'icon' => svg_icon('plus', '#fff'),
        ],
    ]" />
@endsection


@section('main-container')


    <div class="row">

        @forelse($layouts as $layout)
            <div class="col-md-4 mb-4">

                <div class="card invoice-card {{ $layout->is_default ? 'default-layout' : '' }}">

                    @if ($layout->is_default)
                        <div class="default-badge">
                            Default Layout
                        </div>
                    @endif

                    <div class="card-header d-flex justify-content-between align-items-center">

                        <strong>{{ $layout->name }}</strong>

                        <select class="form-control form-control-sm invoice-type" data-id="{{ $layout->id }}"
                            style="width:120px;">

                            <option value="thermal" {{ $layout->invoice_type == 'thermal' ? 'selected' : '' }}>Thermal
                            </option>
                            <option value="a4" {{ $layout->invoice_type == 'a4' ? 'selected' : '' }}>A4</option>
                            <option value="a3" {{ $layout->invoice_type == 'a3' ? 'selected' : '' }}>A3</option>
                            <option value="a2" {{ $layout->invoice_type == 'a2' ? 'selected' : '' }}>A2</option>

                        </select>

                    </div>


                    <div class="invoice-preview">
                        <div class="preview-scale">
                            <iframe srcdoc="{{ $layout->html_preview ?? $layout->html_template }}" class="preview-frame">
                            </iframe>
                        </div>
                    </div>


                    {{-- <div class="card-body text-center">

                        @if ($layout->is_active)
                            <span class="badge bg-primary">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif

                    </div> --}}


                    <div class="card-footer text-center">

                        <a class="btn btn-sm btn-secondary open-popup"
                            href="{{ url('store/popup/StoreInvoiceLayoutController/previewInvoice', $layout->id) }}">
                            {!! svg_icon('eye', '#fff') !!}
                            Preview
                        </a>

                        <a href="{{ route('store.invoice-layout.edit', $layout->id) }}" class="btn btn-sm btn-warning">
                            {!! svg_icon('edit', '#fff') !!}
                            Edit
                        </a>


                        @if (!$layout->is_default && $layout->is_active)
                            <form method="POST" action="{{ route('store.invoice-layout.set-default', $layout->id) }}"
                                style="display:inline-block">
                                @csrf
                                <button class="btn btn-sm btn-info">
                                    {!! svg_icon('star', '#fff') !!}
                                    Default
                                </button>
                            </form>
                        @endif


                        @if ($layout->is_active)
                            <form method="POST" action="{{ route('store.invoice-layout.archive', $layout->id) }}" 
                                class="delete-layout" style="display:inline-block">
                                @csrf
                                <button type="button" class="btn btn-sm btn-danger">
                                    {!! svg_icon('trash', '#fff') !!}
                                    Delete
                                </button>
                            </form>
                        @else
                            <form method="POST" action="{{ route('store.invoice-layout.activate', $layout->id) }}"
                                style="display:inline-block">
                                @csrf
                                <button class="btn btn-sm btn-success">
                                    {!! svg_icon('check', '#fff') !!}
                                    Activate
                                </button>
                            </form>
                        @endif

                    </div>

                </div>

            </div>

        @empty

            <div class="col-12 text-center">
                No layouts found
            </div>
        @endforelse

    </div>


@endsection


@section('script')
<script>
$(document).ready(function(){

    // Update invoice type via Ajax
    $('.invoice-type').change(function(){
        let id = $(this).data('id');
        let invoice_type = $(this).val();

        $.ajax({
            url: "{{ route('store.invoice-layout.update-type') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                id: id,
                invoice_type: invoice_type
            },
            success: function(res){
                if(res.success){
                    showToastr('success', 'Invoice type updated successfully');
                }else{
                    showToastr('error', 'Failed to update invoice type');
                }
            }
        });
    });

    // SweetAlert confirmation for delete
    $('.delete-layout button').click(function(e){
        e.preventDefault(); // prevent immediate form submission

        let form = $(this).closest('form');

        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, I Confirm it!',
            cancelButtonText: 'No, cancel!',
            customClass: {
                confirmButton: 'btn btn-success mt-2',
                cancelButton: 'btn btn-danger ms-2 mt-2'
            },
            buttonsStyling: false
        }).then(function(result){
            if(result.isConfirmed){
                form.submit(); // only submit if confirmed
            } else if(result.dismiss === Swal.DismissReason.cancel){
                Swal.fire({
                    title: 'Cancelled',
                    text: 'Your record is safe :)',
                    icon: 'error',
                    confirmButtonText: 'Ok',
                    customClass: {
                        confirmButton: 'btn btn-primary mt-2'
                    },
                    buttonsStyling: false
                });
            }
        });

    });

});
</script>
@endsection