@extends('backend.layouts.app')

{{--@section('store-name', $store->name)--}}
@section( 'content' )
    <style type="text/css">
        body {
            overflow: hidden !important;
        }

        .kanban-card-body::-webkit-scrollbar {
            width: 8px; /* Set width for Chrome, Safari, and Opera */
        }

        .kanban-card-body::-webkit-scrollbar-thumb {
            background-color: #e0e2e2;
            border-radius: 4px;
        }

        .kanban-card-body::-webkit-scrollbar-thumb:hover {
            background-color: #cbcdcd;
        }

        .kanban-card-body::-webkit-scrollbar-track {
            background-color: #f5f5f5;
            border-radius: 4px;
        }

        .grabbing {
            cursor: grabbing;
        }

        @media screen and (min-width: 768px) {
            .card-container {
                width: 100%;
                overflow: auto;  
            }

            .card-wrapper {
                width: 100%;
                overflow: hidden;
            }

            .kanban-card {
                float: left;
                width: calc(25% - 20px);
                margin: 10px !important;
            }

            .kanban-card-body {
                max-height: 70vh;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .detail-kanban-card {
                width: 90% !important;
                margin-top: 5px !important;
                margin-bottom: 5px !important;
            }

            .dropzone {
                padding: 0px !important;
                min-height: 5px !important;
            }

            .align-label-text {
                text-align: right;
            }

            .modal-dialog {
                max-width: 90% !important;
            }
        }

        @media screen and (max-width: 768px) {
            .card-container {
                width: 100%;
                overflow: auto;  
                position: relative;
            }

            .card-wrapper
            {
                width: 300%;
                overflow: hidden;
            }

            .kanban-card{
                float: left;
                width: calc(25% - 20px);
                margin: 10px !important;
            }

            .kanban-card-body {
                max-height: 60vh;
                overflow-y: auto;
                overflow-x: hidden;
            }

            .detail-kanban-card {
                width: 100% !important;
                margin-top: 5px !important;
                margin-bottom: 5px !important;
            }

            .dropzone {
                width: 60% !important;
                padding: 0px !important;
                min-height: 5px !important;
                left: 20%;
            }

            .align-label-text{
                text-align: left;
                margin-top: 10px !important;
                font-weight: bold;
            }

            .modal-dialog {
                max-width: 100% !important;
            }
        }
    </style>

    <link rel="stylesheet" href="{{ asset('assets/css/jquery-ui.css') }}"  type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/backend/kanban/style.css') }}"  type="text/css" />
    
    <div class="container-fluid">
        <div class="card-container" id="status-lists">
            @include('backend.booking.booking-party.index-ajax')
        </div>
        @include('backend.booking.booking-party._form')
    </div>

@endsection
   
@section('after-scripts')
    <script src="{{ asset( 'assets/js/jquery-ui.js' ) }}"></script>
    <script src="{{ asset( 'js/plugins/touchpad/touchpad.js' ) }}"></script>
    <script src="{{ asset( 'js/booking/party-booking.js' ) }}"></script>
@endsection