@extends('admin.layouts.admin')

@section('content')

    <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>

    <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">Homepage Sections</li>
                            </ul>
                        </div>
                        <div class="col-md-12">
                            <div class="page-header-title">
                                <h3 class="mb-0">Homepage Sections</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row pt-0">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body pt-3">
                            <div>
                                @if(Session::has('message'))
                                    <p class="alert {{ Session::get('alert-class', 'alert-info') }} flash-msg">{{ Session::get('message') }}</p>
                                @endif
                            </div>

                            <div class="row">
                                <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-4">
                                    <div id="sortable-ul-container" class="mt-2">
                                        <ul id="sortable" class="list-group">
                                            @foreach ($sections as $item)
                                                <li id="{{ $item->id }}" class="list-group-item sections-list ui-state-default drag cursor-p grab">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <div>
                                                            <div class="form-check form-switch custom-switch-v1">
                                                                <input name="active" type="checkbox" class="form-check-input input-primary toggle-section" id="chk-{{ $item->id }}" value='1' data-section="{{ $item->id }}"  @checked($item->active)>
                                                                <label class="form-check-label" for="chk-{{ $item->id }}">{{ ucwords(str_replace('_', ' ', $item->name)) }}</label>
                                                            </div>
                                                        </div>
                                                        <div>
                                                            <a href="{{ route('admin.edit-homepage-section', ['section' => $item->id]) }}" class="avtar avtar-xs btn-link-success btn-pc-default" data-bs-toggle="tooltip" data-bs-original-title="Edit">
                                                                <img src="{{ asset('admin/images/icons/settings.png') }}" alt="" class="rounded rounded-circle img-fluid sections-list-settings-icon">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                                <div class="col-md-6 col-lg-6 col-xl-6 col-xxl-8">
                                    <div class="d-flex justify-content-end">
                                        <span data-bs-original-title="Reset homepage fonts" data-bs-toggle="tooltip">
                                            <button id="font-reset-btn" class="btn btn-outline-danger border-0 rounded-0" data-bs data-bs-toggle="modal" data-bs-target="#confirmReset">
                                                Reset Fonts
                                            </button>
                                        </span>
                                    </div>
                                    <div class="d-flex justify-content-center align-items-center h-75">
                                        <div class="f-24 text-center text-muted">
                                            <p class="f-24 fw-medium">Manage Homepage Sections</p>
                                            <p class="f-16 fw-bold">Enable, Disable, and Change Order and Content</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="confirmReset" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="confirmResetTitle" 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-dark" id="confirmResetTitle">Reset Fonts</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 reset all homepage fonts to their original values?</p>
                            <p class="text-warning text-orange-600">Note that this action is not reversible.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" data-bs-dismiss="modal">No</button>
                            <a role="button" onclick="resetFonts()" class="btn btn-danger text-white" data-bs-dismiss="modal">Yes</a>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <script>
        function updateOrder()
        {
            var arr = [];

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

            var url = "{{ route('admin.update-sections-order') }}";

            $.ajax({
                type: 'POST',
                url: url,
                data: {'order': arr},
                success: function(data){
                    // do nothing.
                }
            });
        }

        function resetFonts() {
            var url = "{{ route('admin.reset-fonts') }}";

            $.ajax({
                type: 'POST',
                url: url,
                success: function(data){
                    $('#font-reset-btn').removeClass('btn-primary').addClass('btn-dark').text('Fonts Resored').prop('disabled', 'disabled')
                }
            });
        }

        $(document).ready(function() {

            $("#sortable").sortable({
                placeholder: "ui-state-highlight",
                stop: function(event, ui) {
                    updateOrder();
                }
            });

            $('.toggle-section').on('change.bootstrapSwitch', function(e) {
                let ele = e.target;
                let id = $(ele).attr('data-section');

                let url = "{{ route('admin.toggle-section', ['section' => 'arg1']) }}";
                url = url.replace('arg1', id);

                $.ajax({
                    type: 'POST',
                    url: url,
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success: function(data) {
                        // do nothing
                    }
                });
            });
        });
    </script>

@endsection