@extends('layouts.admin')

@section('content')
<script src="{{ asset('assets/js/jquery.min.js') }}?v={{ time() }}"></script>
<script src="{{ asset('assets/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('assets/js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="{{ asset('assets/css/select2.min.css') }}">
<section class="pc-container">
    <div class="pc-content">
        <div class="page-header">
            <div class="page-block">
                <div class="row align-items-center">
                    <div class="col-md-12">
                        <ul class="breadcrumb">
                            <li class="breadcrumb-item">
                                Settings
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="row p-0">
            <div class="col-md-4 col-xl-3">
                @include('settings.left-bar')
            </div>
            <div class="col-md-8 col-xl-9">
                <div class="card">
                    <div id="page" class="card-body p-0">

                        @include('include.flash-message')
                        @include('include.errors')

                        <form action="{{ route('layoutSave') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="accordion list-group" id="accordionPanelsStayOpenExample">
                                        @php $index=0; @endphp
                                        @foreach ($blocks as $block)
                                        @php $index++; @endphp
                                        <div id="{{ $block->id }}" class="ui-state-default list-group-item drag">
                                            <div class="accordion-item ">
                                                <h2 class="accordion-header" id="panelsStayOpen-heading{{$index}}">
                                                    <div class="accordion-button {!! ($index>1) ? 'collapsed' : '' !!}" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse{{$index}}" aria-expanded="true" aria-controls="panelsStayOpen-collapse{{$index}}">
                                                        {{ 'Section '.$index.' -  '.Str::ucfirst($block->type) }}

                                                        <div data-bs-toggle="tooltip" title="Remove">
                                                            <a href="javascript:void(0)" role="button" data-bs-toggle="modal" data-bs-target="#confirmModal{{$block->id}}" class="remove-block avtar avtar-xs btn-link-danger btn-pc-default">
                                                                <i class="ti ti-trash f-18"></i>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </h2>

                                                <div id="confirmModal{{$block->id}}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle{{$block->id}}" aria-hidden="true">
                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title text-danger" id="confirmModalTitle{{$block->id}}">Remove Block</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <p>Are you sure to remove this block?</p>
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-success" data-bs-dismiss="modal">No</button>
                                                                <a role="button" class="btn btn-danger text-white" href="{{ route('delete-block', ['block' => $block->id]) }}">Yes</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div id="panelsStayOpen-collapse{{$index}}" class="accordion-collapse collapse {!! ($index==1) ? 'show' : '' !!}" aria-labelledby="panelsStayOpen-heading{{$index}}">
                                                    <div class="accordion-body">
                                                        <div class="row">
                                                            <div class="form-group">
                                                                <label class="form-label">Title</label>
                                                                <input name="title{{$index}}" type="text" class="form-control" placeholder="Optional block title" value="{{ $block->title }}">
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="form-label">Description</label>
                                                                <textarea name="description{{$index}}" class="form-control" placeholder="Optional block description">{{ $block->description }}</textarea>
                                                            </div>

                                                            <div class="col-md-12">
                                                                <label class="form-label" for="blockType"> Select Block Type</label>
                                                                <div class="form-group">
                                                                    <select id="block-type" name="type{{$index}}" class='form-select'>
                                                                        <option hidden value="">--- Not Selected ---</option>
                                                                        <option value="banner" {!! ($block->type=='banner') ? 'selected' : '' !!}>Banner</option>
                                                                        <option value="list" {!! ($block->type=='list') ? 'selected' : '' !!}>List</option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div id="listBlock{{$index}}" class="mb-2 row blockDiv {!! ($block->type=='banner') ? 'd-none' : '' !!}">
                                                                <div class="col-md-12">
                                                                    <label class="form-label" for="list"> Select List</label>
                                                                    <div class="form-group">
                                                                        <select data-index="{{$index}}" name="list_type{{$index}}" class='form-select list-type'>
                                                                            <option value="" disabled selected>--- Not Selected ---</option>
                                                                            <option value="packages" {!! ($block->list=='packages') ? 'selected' : '' !!}>Packages</option>
                                                                            <option value="items" {!! ($block->list=='items') ? 'selected' : '' !!}>Items</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                            <div class="col-md-12 banner {!! ($block->type!='banner') ? 'd-none' : '' !!}" id="banner{{$index}}">
                                                                <label class="form-label" for="banner"> Select Banner</label>
                                                                @php $blockBanners=$block->banners;
                                                                $blockBannersArray=$blockBanners->pluck('id')->toArray() @endphp
                                                                <div class="form-group d-xxl-flex d-xl-flex d-lg-flex d-md-flex justify-content-start">
                                                                    @if ($banners->count() > 0)
                                                                    @foreach ($banners as $key=>$item)
                                                                    <div class="form-check m-2 mx-3">
                                                                        <div class="row">
                                                                            <div class="col-xxl-6 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb-2">
                                                                                <input class="form-check-input" name="banner{{$index}}[]" type="checkbox" value="{{$item->id}}" id="flexCheckDefault{{$key}}" {!! in_array($item->id,$blockBannersArray) ? 'checked' : '' !!}>
                                                                                <label class="form-check-label" for="flexCheckDefault{{$key}}">
                                                                                    <img class="img-fluid" src="{{ asset(Storage::url($item->photo)) }}" />
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    @endforeach
                                                                    @endif
                                                                    <div>
                                                                        @error('banner')
                                                                        <span class="error">{{ $message }}</span>
                                                                        @else
                                                                        <span>&nbsp;</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>


                                                            <!-- if($block->type=='list')
                                    if($block->list=='package') -->
                                                            <div class="col-md-12 package {!! ($block->list!='packages') ? 'd-none' : '' !!}" id="package{{$index}}">
                                                                <label class="form-label" for="package"> Select Packages</label>
                                                                @php $blockPackages=$block->block_packages;
                                                                $blockPackagesArray=$blockPackages->pluck('id')->toArray() @endphp
                                                                <div class="form-group d-flex justify-content-start">

                                                                    @if ($packages->count() > 0)
                                                                    <select class="form-control  packageSelect" name="package{{$index}}[]" multiple>
                                                                        @foreach ($packages as $key=>$item)
                                                                        <option value="{{ $item->id }}" {!! in_array($item->id,$blockPackagesArray) ? 'selected' : '' !!}> {{ $item->title }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    @endif
                                                                    <div>
                                                                        @error('package')
                                                                        <span class="error">{{ $message }}</span>
                                                                        @else
                                                                        <span>&nbsp;</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- endif -->

                                                            <!-- if($block->list=='item') -->
                                                            <div class="col-md-12 item {!! ($block->list!='items') ? 'd-none' : '' !!}" id="item{{$index}}">
                                                                <label class="form-label" for="package"> Select Items</label>
                                                                @php $blockItems=$block->block_items;
                                                                $blockItemsArray=$blockItems->pluck('id')->toArray() @endphp
                                                                <div class="form-group d-flex justify-content-start">

                                                                    @if ($items->count() > 0)
                                                                    <select class="form-control itemSelect" name="item{{$index}}[]" multiple>
                                                                        @foreach ($items as $key=>$item)
                                                                        <option value="{{$item->id}}" {!! in_array($item->id,$blockItemsArray) ? 'selected' : '' !!}> {{ $item->title }}</option>
                                                                        @endforeach
                                                                    </select>
                                                                    @endif
                                                                    <div>
                                                                        @error('item')
                                                                        <span class="error">{{ $message }}</span>
                                                                        @else
                                                                        <span>&nbsp;</span>
                                                                        @enderror
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!-- endif -->
                                                            <!-- endif -->


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            <div class="row m-3">
                                <div class="col-6">
                                    <input type="hidden" name="index" value="{{$index}}" id="index" />
                                    <input class="btn btn-primary" type="button" id="addBlock" value="Add New Block" />
                                </div>
                                <div class="col-6 text-end">
                                    <input class="btn btn-primary" type="submit" id="submit" value="Save" />
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
</section>


<script src="{{ asset('assets/js/select2.min.js' ) }}"></script>
<script>
    $(document).on('click', '#addBlock', function() {
        index = $('#index').val();
        console.log('aaaaa ' + index);
        index++;
        $('#index').val(index);

        $.ajax({
            url: "{{ route('addBlock') }}",
            data: {
                index: index
            },
            success: function(result) {
                $('#accordionPanelsStayOpenExample').append(result);
                //   $('.msg').html('<br /><div class="alert alert-success">'+result.msg+'</div>');
            }
        });
    });

    // change block order
    function updateBlockOrder() {
        var arr = [];

        $('.drag').each(function(index, ele) {
            arr.push(ele.id);
        });

        console.log(arr);
        var url = "{{ route('update-block-order') }}";

        $.ajax({
            type: 'POST',
            url: url,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                'order': arr
            },
            success: function(data) {
                if (data == 'done') {
                    sessionStorage.setItem("message", "Layout Order Updated!");
                    location.reload();
                }
            }
        });
    }

    $(document).ready(function() {

        if($('.remove-block').length==1){
            $('.remove-block').hide();
        }
        setTimeout(() => {
            $('.packageSelect').select2();
            $('.itemSelect').select2();
        }, 500);

        message = sessionStorage.getItem("message");
        if (message && message != "") {
            $('.layout-body div:first').html('<p class="alert alert-info flash-msg">' + message + '</p>');
        }
        sessionStorage.setItem("message", "");
        $("#accordionPanelsStayOpenExample").sortable();

        $("#accordionPanelsStayOpenExample").sortable({
            stop: function() {
                updateBlockOrder();
            }
        });

    });

    $(document).on('change', '.block-type', function() {

        index = $(this).attr('data-index');
        console.log(index);
        $('#package' + index).addClass('d-none');
        $('#item' + index).addClass('d-none');
        $('#banner' + index).addClass('d-none');
        $('#listBlock' + index).addClass('d-none');
        console.log($(this).val());

        switch ($(this).val()) {
            case 'banner':
                $('#banner' + index).removeClass('d-none');
                break;

            case 'list':
                $('#listBlock' + index).removeClass('d-none');
                break;
        }
    });

    $(document).on('change', '.list-type', function() {
        index = $(this).attr('data-index');
        $('#package' + index).addClass('d-none');
        $('#item' + index).addClass('d-none');
        switch ($(this).val()) {
            case 'packages':
                $('#package' + index).removeClass('d-none');
                $('.packageSelect').select2();
                break;
            case 'items':
                $('#item' + index).removeClass('d-none');
                $('.itemSelect').select2();
                break;
        }
    });
</script>

<script>
    $(document).ready(function() {
        $('.layout-setting-li').addClass('active-setting-li');
    });
</script>
@endsection