@extends('layouts.dashboard')

@section('content')
    <div class="container mt-3 mb-5">
        <div class="row justify-content-center">
            <div class="col-md-3 p-3 bg-light rounded-3 h-100">
                <div class="mb-3">{{__('Administration')}}</div>
                <div class="d-grid gap-3 mb-5 boxed">
                    <span class="box-title">{{__('Configurator settings')}}</span>
                    <button id="home-product" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-house"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Home')}}
                        </span>
                    </button>
                    <button id="add-product" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-plus-lg"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Add product')}}
                        </span>
                    </button>
                    <button id="edit-product" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-pencil-square"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Edit product')}}
                        </span>
                    </button>
                    <button id="publish-product" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-lightbulb"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Publish product')}}
                        </span>
                    </button>
                    <button id="settings-btn" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-gear"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Settings')}}
                        </span>
                    </button>
                </div>
                <div class="d-grid gap-3 mb-4 boxed">
                    <span class="box-title">{{__('Website settings')}}</span>
                    <button id="banner-1" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-bookmark-star"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Banner 1')}}
                        </span>
                    </button>
                    <button id="banner-2" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-bookmark-star"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Banner 2')}}
                        </span>
                    </button>
                    <button id="banner-3" class="btn btn-outline-secondary admin-btn position-relative px-5" type="button">
                        <span class="position-absolute start-0 ps-3 top-50 translate-middle-y">
                            <i class="bi bi-bookmark-star"></i>
                        </span>
                        <span class="d-inline-block text-center w-100">
                            {{__('Banner 3')}}
                        </span>
                    </button>
                </div>
            </div>
            <div class="col-md-9 ps-5 pt-3">
                <div id="taskName" class="mb-3 fs-2"></div>
                <div id="alertMessage" class="mb-3"></div>
                <div id="taskContainer"></div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="adminModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border border-3" id="adminModalContent">
                <div class="modal-header border border-0">
                    <h5 class="modal-title d-flex align-items-center" id="adminModalTitle"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="adminModalBody">
                </div>
                <div class="modal-footer border border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-outline-primary" id="confirmBtn">
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
@vite(["resources/js/initAdmin.js"]);
@endsection