@section('title', __('radio.playlists_edit_title'))
@section('head')
    <style>
        .custom-select {
            position: relative;
        }

        .custom-select .selected-value {
            display: flex;
            cursor: pointer;
            font-weight: 600;

            background: #FFF;
            border: 1px solid #ddddde;
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
        }
        .custom-select:not(.visible-options) .selected-value {
            border-radius: 3px;
        }
        .custom-select:not(.visible-options) .options {
            display: none;
        }
        .custom-select .selected-value .selected-icon {
            padding-left: 16px;
            align-self: center;
            font-size: 16px;
        }
        .custom-select .selected-value:not(.with-icon) .selected-icon {
            display: none;
        }
        .custom-select .selected-value .selected-icon .icon-container {
            width: 16px;
            text-align: center;
        }
        .custom-select .selected-value .selected-label {
            flex: 1;
            min-width: 140px;
            margin: 0 16px;
            align-self: center;
        }
        .custom-select .selected-value .selected-caret {
            padding: 6px 14px;
            align-self: center;
            border-left: 1px solid #ddddde;
            font-size: 16px;
        }

        .custom-select .op-container {
            position: relative;
        }
        .custom-select .options {
            position: absolute;
            z-index: 101;
            top: 40px;
            border: 1px solid #ddddde;
            width: 340px;

            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        .custom-select .options.options-align-center {
            right: 0;
            left: 0;
            width: unset;
        }
        .custom-select .options.options-align-right {
            right: 0px;
        }
        .custom-select .options.options-align-right,
        .custom-select .options.options-align-right .option:first-child {
            border-top-left-radius: 3px;
        }
        .custom-select .options.options-align-left {
            right: 0px;
        }
        .custom-select .options.options-align-left .option:first-child {
            border-top-right-radius: 3px;
        }

        .custom-select .options .option {
            display: flex;
            cursor: pointer;
            border-bottom: 1px solid #ddddde;
            background-color: #FFF;
        }
        .custom-select .options .option:hover,
        .custom-select .options .option:active {
            background-color: #c4f9e8;
        }
        .custom-select .options .option:last-child {
            border-bottom: none;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
        }

        .custom-select .options .option .option-icon {
            padding: 16px 0 16px 16px;
            font-size: 16px;
        }
        .custom-select .options .option .option-info {
            flex: 1;
            padding:16px;
        }
        .custom-select .options .option .option-info .option-label {
            margin-bottom: 5px;
            font-weight: 600;
        }
        .custom-select .options .option .option-info .option-description {
            color: #777;
        }

        @media all and (max-width: 991px) {
            .custom-select {
                width: 100%;
            }
            .custom-select .options {
                width: 100%;
            }
            .custom-select .options,
            .custom-select .options .option {
                border-top-left-radius: unset !important;
                border-top-right-radius: unset !important;
            }
        }
    </style>
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
@endsection
@include('includes/header')
@include('includes/topRadio')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('radio.playlists_edit_title') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="https://app.brascast.com/radio/home">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="https://app.brascast.com/radio/playlists">{{ __('radio.menu_item_2_sub_2') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.playlists_edit_title') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">

            <div class="block block-mode-loading-refresh block-mode-loading">
                <div class="block-content">

                    <div class="row ps-3 pe-3 mb-3">
                        <div class="col-md-6 p-0">
                            <div class="form-floating mb-1 h-width">
                                <input type="hidden" name="id" value="">
                                <input type="text" class="form-control" id="name" name="name" autocomplete="off" onkeyup="this.value = this.value.replace(/[^a-záàâãéèêíïóôõöúçñÁÀÂÃÉÈÍÏÓÔÕÖÚÇÑA-Z0-9 \.]/g, ''); limit(this);" value="01 HORA SÓ DE MUSICAS">
                                <label class="float-name" for="float-name">{{ __('radio.playlists_name_label') }}</label>
                            </div>
                            <div class="errormsg d-none text-danger animated fadeIn"></div>
                        </div>
                    </div>

                    <div class="row ps-3 pe-3 mb-3 playlistStage">
                        <div class="col-md-6 p-0">
                            <div class="block block-rounded block-bordered listSongs">
                                <ul class="nav nav-tabs nav-tabs-block align-items-center" role="tablist">
                                    <li class="nav-item navBlock01">
                                        <button class="nav-link typeBtn text-md-start btnType-1 active" onclick="nav('');" id="">
                                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                                <div class="mb-0 text-center">
                                                    <i class="fa fa-folder-open mus-color fa-2x pb-1"></i>
                                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.fm_tab_musics') }}</dt>
                                                </div>
                                            </div>
                                        </button>
                                    </li>
                                    <li class="nav-item navBlock01">
                                        <button class="nav-link typeBtn text-md-start btnType-2" onclick="nav('Comerciais');" id="Comerciais">
                                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                                <div class="mb-0 text-center">
                                                    <i class="fa fa-folder ann-color fa-2x pb-1"></i>
                                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.fm_tab_ads') }}</dt>
                                                </div>
                                            </div>
                                        </button>
                                    </li>
                                    <li class="nav-item navBlock01">
                                        <button class="nav-link typeBtn text-md-start btnType-3" onclick="nav('Vinhetas');" id="Vinhetas">
                                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                                <div class="mb-0 text-center">
                                                    <i class="fa fa-folder vin-color fa-2x pb-1"></i>
                                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('radio.library_tab_vinhetas') }}</dt>
                                                </div>
                                            </div>
                                        </button>
                                    </li>
                                    <li class="nav-item navBlock01">
                                        <button class="nav-link typeBtn text-md-start btnType-4" onclick="nav('','','1');" id="Adicionais">
                                            <div class="flex-grow-1 d-flex justify-content-between align-items-center">
                                                <div class="mb-0 text-center">
                                                    <i class="fa fa-plus-circle add-color fa-2x pb-1"></i>
                                                    <dt class="fs-6 fw-semibold h1-info-block01">{{ __('general.sec_additional') }}</dt>
                                                </div>
                                            </div>
                                        </button>
                                    </li>
                                </ul>
                                <div class="block-content p-0">
                                    <div class="p-2 mb-0">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="search" placeholder="{{ __('radio.fm_search_placeholder') }}" autocomplete="off">
                                            <button type="button" class="ms-2 btn rounded-pill btn-alt-info d-none clSearch" onclick="nav('','')">{{ __('radio.playlists_clear_search') }}</button>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center pt-2 pb-2 topborder">
                                        <div class="flex-shrink-0 ms-2 me-1">
                                            <input type="checkbox" class="form-check-input checkAll">
                                        </div>
                                        <div class="flex-shrink-1 ms-2">
                                            <i class="fa fa-folder-open me-2"></i>
                                        </div>
                                        <div class="flex-shrink-2 curLoc t-overflow"><b>Músicas</b></div>

                                        <div class="ml-auto me-2">
                                            <button class="btn btn-light pl-unmark fs-sm fw-normal btn-xs mb-0 d-none">{{ __('radio.action_unselect_all') }}</button>
                                            <button class="btn btn-primary pl-addto fs-sm fw-normal btn-xs mb-0 d-none">{{ __('radio.playlists_add_to') }}</button>
                                        </div>
                                    </div>
                                    <input type="hidden" class="cLocation" value="/">
                                    <div class="fl-manager"><ul class="listAll fl-list list-group striped-list"></ul></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 pe-0">
                            <div class="block block-rounded block-bordered plblock position-relative">

                                <div id="list-container" class="disable-selection" style="margin-top: 0;">
                                    <div class="block-items" style="margin-top: 0;">
                                        <a id="ouvirRadio" onclick="stopPPlayer();" style="top: 75px;right: 20px;position: absolute;z-index: 9598;background: white;display:none;" class="btn btn-sm">
                                            <i class="fa fa-stop-circle" style="font-size: 15px;line-height: 23px;"></i></a>
                                        <div class="block-item block-item-archive" data-path="">
                                            <div class="player-progress-bar">
                                                <div class="player-progress-bar-value" style="width: 0px;"></div>
                                            </div>
                                            <div class="block-item-internal">
                                                <div class="block-item-name" style="margin-top: -1px;margin-bottom: 1px;">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="block-header pt-3 pb-3 d-flex">
                                    <h3 class="block-title hupper">
                                        Playlist (<span id="totalpl_itens">37</span>)
                                    </h3>
                                    <div class="ml-auto">
                                        <div class="custom-select">
                                            <input type="hidden" name="type" id="type" value="0">
                                            <div class="selected-value with-icon">
                                                <div class="selected-icon">
                                                    <div class="icon-container">
                                                        <i class="fa fa-reorder"></i>
                                                    </div>
                                                </div>
                                                <div class="selected-label">{{ __('radio.pl_mode_sequential') }}</div>
                                                <div class="selected-caret">
                                                    <i class="fa fa-caret-down"></i>
                                                </div>
                                            </div>
                                            <div class="opt-container">
                                                <div class="options options-align-right">
                                                    <div class="option" data-value="0" data-label="{{ __('radio.pl_mode_sequential') }}" data-icon="reorder">
                                                        <div class="option-icon">
                                                            <i class="fa fa-reorder"></i>
                                                        </div>
                                                        <div class="option-info">
                                                            <div class="option-label">
                                                                {{ __('radio.pl_mode_sequential') }}                        </div>
                                                            <div class="option-description">
                                                                {{ __('radio.pl_mode_sequential_desc') }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="option" data-value="1" data-label="{{ __('radio.pl_mode_random') }}" data-icon="random">
                                                        <div class="option-icon">
                                                            <i class="fa fa-random"></i>
                                                        </div>
                                                        <div class="option-info">
                                                            <div class="option-label">
                                                                {{ __('radio.pl_mode_random') }}                        </div>
                                                            <div class="option-description">
                                                                {{ __('radio.pl_mode_random_desc') }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center pt-2 pb-2 border-1 border-top border-bottom">
                                    <span class="ms-3 me-2" style="flex-shrink:0; width:1em;"></span>
                                    <div class="flex-shrink-0 pl-timers fw-bold">
                                        {{ __('radio.pl_starts_at') }}
                                    </div>
                                    <div class="flex-shrink-1 t-overflow fw-bold">{{ __('radio.pl_table_file') }}</div>
                                    <div class="flex-shrink-2 text-end ml-auto me-2">
                                        <button class="btn btn-warning pl-custom fs-sm fw-normal btn-xs" onclick="customize()">{{ __('radio.pl_action_interleave') }}</button>
                                        <button class="btn shuffle btn-secondary fs-sm fw-normal btn-xs">{{ __('radio.pl_action_shuffle') }}</button>
                                        <button class="btn btn-danger pl-rall fs-sm fw-normal btn-xs">{{ __('radio.app_action_clear') }}</button>
                                    </div>
                                </div>

                                <div class="block-content p-0">
                                    <ul class="list-group striped-list fl-playlist ui-sortable position-relative ui-sortable" style="min-height: 450px"></ul>
                                </div>
                                <div class="card-footer border-top-0 d-flex align-items-center">
                                    <div class="d-flex align-items-center">
                                        <h6 class="mb-0">{{ __('radio.pl_total_time') }}</h6>
                                        <div class="ms-1 pt-1 h5 mb-0 fw-bold pl-total-time">01:00:30</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <button type="button" class="btn btn-primary">{{ __('general.action_save') }}</button>
                    </div>


                </div>
            </div>

        </div>
    </div>




</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script type="text/javascript">

    window.addEventListener("beforeunload", function() {
        return "Não feche";
    });

    Sweetalert2.fire({
        html:'<h4>Otimizando playlist...</h4> <div class="progress push" style="height: 20px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" style="width: 0%;"></div></div>',
        allowEscapeKey: false,
        allowOutsideClick: false,
        showConfirmButton: false,
    });


    setTimeout(function() {
        $.ajax({
            xhr: function()
            {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt){
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        $('.progress-bar').css('width',Math.round(percentComplete*100)+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: "https://{{ $getServerDetails->name }}.brascast.com/redo.php",
            data: {port: "{{ $playlistData->port }}",id:"{{ $playlistData->id }}", old: "{{ $playlistData->old_id }}"},
            success: function(response){
                location.reload();
            }
        });
    }, 800);

</script>
</body>
</html>