@extends('layouts.admin')

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">Home Management</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Home</a></li>
                        <li class="breadcrumb-item active">Management</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- start row for stats -->
<div class="row">
    <div class="col-lg-12">
        <div class="card" id="orderList">
            <div class="card-body">
                <form class="tablelist-form " autocomplete="off" name="homeForm" id="homeForm" method="post" novalidate enctype="multipart/form-data" action="{{ route('admin.home.management.update') }}">
                    <div class="row" id="homepage-container">
                        @foreach ($elements as $index => $item)
                            <div class="col-lg-12 home-sortable-item" data-id="{{ $item['id'] }}">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-3 mb-3">
                                                <label for="customername-field" class="form-label">Name</label>
                                                <input type="text" name="items[{{ $index }}][name]" class="form-control item-name-field" placeholder="Name" value="{{ $item['name'] }}" required />
                                            </div>
                                            <div class="col-lg-3 mb-3">
                                                <label for="customername-field" class="form-label">Name (Arabic)</label>
                                                <input type="text" name="items[{{ $index }}][name_ar]" dir="rtl" class="form-control item-name-ar-field" placeholder="Name" value="{{ $item['name_ar'] }}" required />
                                            </div>
                                            <div class="col-lg-3 mb-3">
                                                <label for="customername-field" class="form-label">Type</label>
                                                <select name="items[{{ $index }}][type]" class="form-select item-type-field" required>
                                                    <option value="category" {{ $item['type'] == 'category' ? 'selected' : '' }}>Category</option>
                                                    <option value="popular-category" {{ $item['type'] == 'popular-category' ? 'selected' : '' }}>Popular Category</option>
                                                    <option value="badge" {{ $item['type'] == 'badge' ? 'selected' : '' }}>Badge</option>
                                                    <option value="banner" {{ $item['type'] == 'banner' ? 'selected' : '' }}>Banner</option>
                                                    <option value="slider" {{ $item['type'] == 'slider' ? 'selected' : '' }}>Slider</option>
                                                    <option value="section" {{ $item['type'] == 'section' ? 'selected' : '' }}>Section</option>
                                                </select>
                                            </div>
                                            <div class="col-lg-3 mb-3">
                                                <label for="customername-field" class="form-label">Item</label>
                                                <select name="items[{{ $index }}][item_id]" class="form-select item-dropdown-field">
                                                    <option>Select Item</option>
                                                    @if ($item['type'] == 'category')
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category['id'] }}" {{ $item['item_id'] == $category['id'] ? 'selected' : '' }}>{{ $category['text'] }}</option>
                                                        @endforeach
                                                    @elseif ($item['type'] == 'popular-category')
                                                        @foreach ($categories as $category)
                                                            <option value="{{ $category['id'] }}" {{ $item['item_id'] == $category['id'] ? 'selected' : '' }}>{{ $category['text'] }}</option>
                                                        @endforeach
                                                    @elseif ($item['type'] == 'badge')
                                                        @foreach ($badges as $badge)
                                                            <option value="{{ $badge['id'] }}" {{ $item['item_id'] == $badge['id'] ? 'selected' : '' }}>{{ $badge['text'] }}</option>
                                                        @endforeach
                                                    @elseif ($item['type'] == 'banner')
                                                        @foreach ($banners as $banner)
                                                            <option value="{{ $banner['id'] }}" {{ $item['item_id'] == $banner['id'] ? 'selected' : '' }}>{{ $banner['text'] }}</option>
                                                        @endforeach
                                                    @elseif ($item['type'] == 'slider')
                                                        @foreach ($sliders as $slider)
                                                            <option value="{{ $slider['id'] }}" {{ $item['item_id'] == $slider['id'] ? 'selected' : '' }}>{{ $slider['text'] }}</option>
                                                        @endforeach
                                                    @elseif ($item['type'] == 'section')
                                                        @foreach ($sections as $section)
                                                            <option value="{{ $section['id'] }}" {{ $item['item_id'] == $section['id'] ? 'selected' : '' }}>{{ $section['text'] }}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                            <input type="hidden" class="sort-item-field" name="items[{{ $index }}][sort_order]" value="{{ $item['sort_order'] }}">
                                        </div>
                                        <button class="btn btn-danger remove-item-btn"><i class="ri-close-line"></i>Remove Item</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="hstack gap-2 justify-content-between"> 
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-success">Back</a>
                        <div class="btn-wrapper">
                            <a class="btn btn-info" href="#" id="addItemBtn"><i class="ri-add-line align-bottom me-1"></i>Add Item</a>
                            <button type="submit" class="btn btn-success" id="submitBtn">Update Home</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="home-manage-item" style="display: none;">
    <div class="col-lg-12 home-sortable-item" data-id="">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-3 mb-3">
                        <label for="customername-field" class="form-label">Name</label>
                        <input type="text" name="" class="form-control item-name-field" placeholder="Name" required />
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label for="customername-field" class="form-label">Name (Arabic)</label>
                        <input type="text" name="" dir="rtl" class="form-control item-name-ar-field" placeholder="Name" required />
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label for="customername-field" class="form-label">Type</label>
                        <select class="form-select item-type-field" required>
                            <option>Select Type</option>
                            <option value="category">Category</option>
                            <option value="popular-category">Popular Category</option>
                            <option value="badge">Badge</option>
                            <option value="banner">Banner</option>
                            <option value="slider">Slider</option>
                            <option value="section">Section</option>
                        </select>
                    </div>
                    <div class="col-lg-3 mb-3">
                        <label for="customername-field" class="form-label">Item</label>
                        <select class="form-select item-dropdown-field">
                            <option>Select Item</option>
                        </select>
                    </div>
                    <input type="hidden" class="sort-item-field" name="" value="">
                </div>
                <button class="btn btn-danger remove-item-btn"><i class="ri-close-line"></i>Remove Item</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/additional-methods.min.js"></script>
<script>
var HomeManagement = {
    mainContainer: $('#homepage-container'),
    addItemBtn: '#addItemBtn',
    itemTypeField: '.item-type-field',
    itemHtml: $('.home-manage-item'),
    removeItemBtn: '.remove-item-btn',
    categoriesList: @json($categories), 
    badgesList: @json($badges),
    bannersList: @json($banners),
    slidersList: @json($sliders),
    sectionsList: @json($sections),
    popularCategoriesList: @json($categories),
    sortOrder: {{!empty($elements)?count($elements):0}},
    init: function() {
        that = this;
        that.initEvents();
    }, 
    initEvents: function() {  
        var that = this;

        $(that.addItemBtn).on('click', function(e) {
            e.preventDefault();
            that.addItem();
        });

        $(document).on('change',that.itemTypeField, function() {
            var type = $(this).val();
            that.populateItemsOptions($(this),type);
        });

        $(document).on('click',that.removeItemBtn, function() {
            var type = $(this).val();
            that.removeItem($(this));
        });

        that.initSortable();

    },
    initSortable: function(){
        var that = this;
        that.mainContainer.sortable({
            update: function (event, ui) {
                $(this).find('.home-sortable-item').each(function (index) {
                    $(this).find('.sort-item-field').val(index);
                });
            }
        });
    },
    addItem: function() {
        var that = this;
        that.sortOrder++;
        that.itemHtml.find('.item-name-field').attr('name', 'items[' + that.sortOrder + '][name]');
        that.itemHtml.find('.item-name-ar-field').attr('name', 'items[' + that.sortOrder + '][name_ar]');
        that.itemHtml.find('.item-type-field').attr('name', 'items[' + that.sortOrder + '][type]');
        that.itemHtml.find('.item-dropdown-field').attr('name', 'items[' + that.sortOrder + '][item_id]');
        that.itemHtml.find('.sort-item-field').attr('name', 'items[' + that.sortOrder + '][sort_order]');
        that.itemHtml.find('.sort-item-field').val(that.sortOrder);
        that.mainContainer.append(that.itemHtml.html());
        that.initSortable();
    },
    populateItemsOptions: function(target,type) {
        var that = this;
        var options = that.generateItemOptions(type);
        var dropdownField = target.closest('.row').find('.item-dropdown-field').html(options);
    },
    generateItemOptions: function(type){
        var that = this;
        var options = '<option>Select Item</option>';
        switch(type) {
            case 'category':
                $.each(that.categoriesList, function(index, category) {
                    options += '<option value="' + category.id + '">' + category.text + '</option>';
                });
                break;
            case 'popular-category':
                $.each(that.popularCategoriesList, function(index, category) {
                    options += '<option value="' + category.id + '">' + category.text + '</option>';
                });
                break;
            case 'badge':
                $.each(that.badgesList, function(index, badge) {
                    options += '<option value="' + badge.id + '">' + badge.text + '</option>';
                });
                break;
            case 'banner':
                $.each(that.bannersList, function(index, banner) {
                    options += '<option value="' + banner.id + '">' + banner.text + '</option>';
                });
                break;
            case 'slider':
                $.each(that.slidersList, function(index, slider) {
                    options += '<option value="' + slider.id + '">' + slider.text + '</option>';
                });
                break;
            case 'section':
                $.each(that.sectionsList, function(index, section) {
                    options += '<option value="' + section.id + '">' + section.text + '</option>';
                });
                break;
        }
        return options;
    },
    removeItem: function(target) {
        target.closest('.home-sortable-item').remove();
    }
};

$(document).ready(function() {
    HomeManagement.init();

    $("#homeForm").validate({
                rules: {
                    items: {
                        required: true,
                    },
                },
                errorPlacement: function (error, element) {
                    if (element.is("select")) {
                        error.insertAfter(element.next('.select2')); 
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function (form) {
                    let formData = new FormData(form);

                    // AJAX submission
                    $.ajax({
                        url: form.action,
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                        },
                        success: function (response) { 
                          
                            Swal.fire({
                                iconHtml: `<img src="{{ asset('assets/images/success-circle.svg') }}" class="img-fluid">`,
                               // title: "Success!",
                                text: response.message,
                                confirmButtonText: "OK",
                                customClass: {
                                    confirmButton: 'custom-ok-button-class w-sm' // Add your custom class here
                                }
                            }).then(() => {
                                window.location.href = "{{ route('admin.home.management') }}"; // Redirect to company list
                            });
                        },
                        error: function (xhr) {
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;

                                // Display validation errors from the server
                                $.each(errors, function (key, value) {
                                    let field = $(`[name="${key}"]`);
                                    field.addClass("error"); // Add error class to the field
                                    field.after(`<label class="error">${value[0]}</label>`); // Add error message
                                });
                            } else { 
                                Swal.fire({
                                    text: "Something went wrong. Please try later",
                                    iconHtml: `<img src="{{ asset('assets/images/error-circle.svg') }}" class="img-fluid">`,
                                    confirmButtonText: "OK", // Optional: Change the text of the button
                                    customClass: {
                                        confirmButton: 'custom-ok-button-class w-sm' // Add your custom class here
                                    }
                                });
                            }
                        }
                    });

                    return false; // Prevent default form submission
                }, 
                invalidHandler: function(event, validator) {
                    var firstInvalidField = $(validator.errorList[0].element);
                    
                    $('html, body').animate({
                        scrollTop: firstInvalidField.offset().top - 100 
                    }, 500); 
                }
            });
});
</script>
@endsection