@extends('tenant.settings.warehouses.warehouses-settings-tabs')
@section('breadcrumb')
    @include('tenant.layouts.breadcrumb', [
        'items' => [
            __('breadcrumb.printing_structure') => '#',
            __('breadcrumb.specified_templates') => '#',
        ],
    ])
@endsection

@section('style')
    <style>
        .md-card {
            margin-bottom: 20px;
        }

        .md-card-header {
            background-color: #f2f2f2;
            padding: 10px;
        }

        .md-card-body {
            padding: 15px;
        }

        .selected-card {
            border: 2px solid green;
        }

        #ErrorModal {
            display: none;
            position: fixed;
            top: 10px;
            right: 10px;
            max-width: 270px;
            width: 100%;

        }

        .error-modal-content {
            background-color: #dd1c1c;
            padding: 10px;
            border-radius: 5px;
        }

        .close {
            float: right;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }

        #succesModal {
            display: none;
            position: fixed;
            top: 10px;
            right: 10px;
            max-width: 270px;
            width: 100%;

        }

        .succes-modal-content {
            background-color: #04960b;
            padding: 10px;
            border-radius: 5px;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/layouts/tabs.css')}}">
@endsection

@section('sidebar')
    @include('tenant.layouts.sidebar', ['activeItem' => 'settings.warehouses.print_bond_templates'])
@endsection

@section('warehouses-settings-content')
    <div class="inner-content-layout form-bg-color p-4 rounded-form">
        <div class="d-flex justify-content-between">
            <h4>@lang('settings/warehouses/print-bond-templates/index.printing_templates_specific_templates')</h4>
        </div>
        <div class="row">
            <div class="col-md-4">
                @php $supported_bond_types = $templates->pluck('bond_type')->unique()->all(); @endphp

                <div class="filter-section mt-4">
                    <label for="filter_by_type">@lang('settings/warehouses/print-bond-templates/index.select_by_type')</label>
                    <select id="filter_by_type">
                        <option value="all"> @lang('settings/warehouses/print-bond-templates/index.all_type')</option>
                        @foreach ($supported_bond_types as $supported_bond_type)
                            @php
                                $ar_name = match ($supported_bond_type) {
                                    'salesOffer' => __('settings/warehouses/print-bond-templates/index.sales_offer'),
                                    'salesInvoice' => __('settings/warehouses/print-bond-templates/index.sales_invoice'),
                                    'salesOrder' => __('settings/warehouses/print-bond-templates/index.sales_order'),
                                    default => $supported_bond_type,
                                };
                            @endphp

                            <option value="{{ $supported_bond_type }}">{{ $ar_name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div class="inner-content-layout form-bg-color p-4 rounded-form">
            <div class="templates-section mt-4">
                @foreach ($supported_bond_types as $supported_bond_type)
                    <div class="row bond-type" id="{{ $supported_bond_type }}_bond_type">
                        @foreach ($templates->where('bond_type', $supported_bond_type) as $template)
                            @php
                                $isSelected =
                                    isset($selected_templates[$template->bond_type]) &&
                                    $selected_templates[$template->bond_type] == $template->id;
                            @endphp
                            <div class="col-md-6">
                                <div class="card md-card {{ $isSelected ? 'selected-card' : '' }}"
                                    onclick="selectCard(this)" data-template-id="{{ $template->id }}"
                                    data-template-type="{{ $template->bond_type }}">
                                    <div class="card-header md-card-header">
                                        <h5 class="card-title text-center">{{ $template->title }}</h5>
                                    </div>
                                    <div class="card-body md-card-body">
                                        <div class="container" style="min-height: 300px">
                                            <img class="img-fluid"
                                                src="{{ asset('images/warehouses/' . $template->path . '.png') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                @endforeach
            </div>


            <div id="succesModal" class="modal">
                <div class="succes-modal-content">
                    <span class="close"></span>
                    <p style="color:#ffffff; font-size:16px !important;"> @lang('settings/warehouses/print-bond-templates/index.print_layout_has_been_saved_successfully')</p>
                </div>
            </div>

            <div id="ErrorModal" class="modal">
                <div class="error-modal-content">
                    <span class="close"></span>
                    <p style="color:#ffffff; font-size:16px !important;"> @lang('settings/warehouses/print-bond-templates/index.please_select_a_print_layout_before_saving')</p>
                </div>
            </div>
        </div>

        <div class="text-center">
            <button class="btn orange-btn" onclick="saveSelectedTemplate()">@lang('general.save')</button>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $(document).ready(function() {
            $('#filter_by_type').change(function() {
                var selectedType = $(this).val();
                $('.bond-type').hide();
                if (selectedType === 'all') {
                    $('.bond-type').show();
                } else {
                    $('#' + selectedType + '_bond_type').show();
                }
            });
        });

        function selectCard(card) {
            const bondType = $(card).closest('.bond-type').attr('id').replace('_bond_type', '');
            $('.selected-card').each(function() {
                const selectedBondType = $(this).closest('.bond-type').attr('id').replace('_bond_type', '');
                if (selectedBondType === bondType) {
                    $(this).removeClass('selected-card');
                }
            });
            $(card).addClass('selected-card');
        }


        function saveSelectedTemplate() {
            const csrf = "{{ csrf_token() }}";
            const url = route('tenant.settings.warehouses.save-print-bond-templates');
            const selectedCards = document.querySelectorAll('.selected-card');
            if (selectedCards.length > 0) {
                const data = [];
                selectedCards.forEach(card => {
                    const templateId = card.getAttribute('data-template-id');
                    const templateType = card.getAttribute('data-template-type');
                    data.push({
                        template_id: templateId,
                        template_type: templateType,
                    });
                });
                $.confirm({
                    title:  "{{ __('settings/warehouses/print-bond-templates/index.are_you_sure_you_want_to_save_this_layout') }}",
                    content: "{{ __('settings/warehouses/print-bond-templates/index.it_will_be_displayed_during_printing') }}",
                    type: 'green',
                    url: url,
                    data: {
                        templates: data,
                        _token: csrf,
                    },
                    buttons: {
                        ok: {
                            text: "{{ __('general.yes') }}",
                            btnClass: 'btn orange-btn',
                            keys: ['enter'],
                            action: (response) => {
                                $.ajax({
                                    type: 'POST',
                                    url: url,
                                    data: {
                                        templates: data,
                                        _token: csrf,
                                    },
                                    success: function(response) {
                                        setTimeout(function() {
                                            const modal = document.getElementById(
                                                'succesModal');
                                            if (modal) {
                                                modal.style.display = 'block';
                                                setTimeout(function() {
                                                    modal.style.display = 'none';
                                                }, 3000);
                                            }
                                        }, 100);
                                    },
                                    error: function(error) {
                                        console.error(error);
                                    }
                                });
                            }
                        },
                        cancel: {
                            text:  "{{ __('general.cancel') }}",
                            btnClass: 'btn-default',
                            keys: ['esc'],
                        }
                    },
                });

            } else {
                setTimeout(function() {
                    const modal = document.getElementById('ErrorModal');
                    if (modal) {
                        modal.style.display = 'block';
                        setTimeout(function() {
                            modal.style.display = 'none';
                        }, 3000);
                    }
                }, 100);
            }
        }
    </script>
@endpush