@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="{{ asset('css/select2.min.css') }}">


<div class="page-links">
    <a href="{{ route('basic-settings') }}">Settings</a>
    <span> > </span>
    <a href="javascript:void(0)">{{ $title }}</a>
</div>

<div class="row">
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
        @include('settings.leftbar')
    </div>
    <div class="col-xxl-9 col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
        <div class="card-main">
            <div class="customer-details-form form-fld">
                <h2 class="iheading-man">
                    <div class="row">
                        <div class="col-6">{{ $title }} </div>
                    </div>
                </h2>
                <form action="{{ route('layoutSave') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="accordion list-group m-0" 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 p-0 mt-2">
                                    <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')
                              
                                                    <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" />
                            <button id="addBlock" type="button" class="btn btn-light bg-color20 color0 border-0 save-draft">Add New Block</button>
                        </div>
                        <div class="col-6 text-end">
                            <button id="submit" type="submit" class="btn btn-light bg-color20 color0 border-0  float-end save-draft">Save</button>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/jquery.min.js') }}?v={{ time() }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('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>
@endpush