@section('title', __('radio.menu_item_2_sub_2'))
@section('head')
    <link rel="stylesheet" href="/assets/js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/datatables-responsive-bs5/css/responsive.bootstrap5.min.css">
    <link rel="stylesheet" href="/assets/js/plugins/sweetalert2/sweetalert2.min.css">
	<script src="/assets/js/lib/jquery.min.js"></script>
	<script src="/assets/js/plugins/datatables/jquery.dataTables.min.js"></script>
	<script src="/assets/js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js"></script>
	<script src="/assets/js/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
	<script src="/assets/js/plugins/datatables-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons/dataTables.buttons.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons-jszip/jszip.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons-pdfmake/pdfmake.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons-pdfmake/vfs_fonts.js"></script>
	<script src="/assets/js/plugins/datatables-buttons/buttons.print.min.js"></script>
	<script src="/assets/js/plugins/datatables-buttons/buttons.html5.min.js"></script>
@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.menu_item_2_sub_2') }}
                    </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="{{ route('radio.home.r') }}">{{ __('radio.menu_item_1') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('radio.menu_item_2') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('radio.menu_item_2_sub_2') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">

        <div class="col-md-12">
	
			
            @if (\Session::has('success'))
                <div class="alert alert-primary alert-icon alert-dismissible fade show" role="alert">
                        <i class="uil uil-check-circle"></i> <b>{!! \Session::get('success') !!}</b>
                    </div>
                @php Session::forget('success'); @endphp
            @endif

                @if (\Session::has('error'))
                    <div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
                        <i class="uil uil-triangle-exclamation"></i> <b>{!! \Session::get('error') !!}</b>
                    </div>
                    @php Session::forget('error'); @endphp
                @endif

            <div class="block block-rounded">
                <div class="block-content p-2">

                    <table class="table table-vcenter table-hover js-dataTable-responsive mb-0">
                        <thead style="line-height: 0px;">
                        <tr>
                            <th class="d-none"></th>
                            <th class="no-sort d-none d-md-table-cell" style="width: 50px;"></th>
                            <th class="no-sort"></th>
                            <th class="no-sort" style="width: 150px;"></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($playlists as $playlist)
                        <tr>
                            <td class="d-none">{{ $playlist->id }}</td>
                            <td class="text-center fs-sm d-none d-md-table-cell">
                                <div class="d-inline-block px-2 py-2 rounded-3 fs-xs fw-semibold text-mutted bg-body">
                                    <i class="fa fa-2x fa-music"></i>
                                </div>
                            </td>
                            <td class="fw-semibold fs-sm">
                               <span> {{ $playlist->name }}</span>
                                <div class="fw-normal">{{ trans_choice('radio.playlists_files_count', $playlist->total_files, ['count' => $playlist->total_files]) }} ・ {{ ($playlist->type == '1' ? __('radio.playlists_type_random') : __('radio.playlists_type_sequential')) }} ・ {{ $playlist->duration }}</div>
                            </td>
                            <td class="text-end fs-sm">
                                <div class="btn-group dropstart"> <button type="button" class="btn btn-sm btn-light fl-actionbtns" data-bs-toggle="dropdown" aria-expanded="false"> <i class="fa fa-ellipsis"></i> </button>
                                    <ul class="dropdown-menu">
                                        <li><button class="dropdown-item loadPlaylist" data-action="load" id="{{ $playlist->id }}"><i class="fa fa-play me-2"></i> {{ __('radio.playlists_action_play_autodj') }}</button></li>
                                        <li><button class="dropdown-item loadPlaylist" data-action="duplicate" id="{{ $playlist->id }}"><i class="far fa-copy me-2"></i> {{ __('radio.playlists_action_duplicate') }}</button></li>
                                    </ul>
                                </div>
                                <a href="{{ route('radio.playlists.u', $playlist->id) }}" class="btn btn-sm btn-light fl-actionbtns"> <i class="fa fa-edit"></i> </a>
                                <button type="button" id="{{ $playlist->id }}" class="btn btn-sm btn-danger removeConfirm"> <i class="fa fa-times"></i> </button>
                                <form id="form_delete_{{ $playlist->id }}" action="{{ route('radio.playlists.d', $playlist->id) }}" method="POST">@method('DELETE')</form>
                            </td>
                        </tr>
                       @endforeach
                        </tbody>
                    </table>



                </div>
            </div>
        </div>

    </div>




</div>

</div>

</main>


@include('includes/footer')

</div>

<script src="/assets/js/main.min.js"></script>



<script src="/assets/js/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="/assets/js/plugins/bootstrap-notify/bootstrap-notify.min.js?t=5"></script>
<script>
    var dataTextNew = @json(__('radio.playlists_create'));
    var dataLinkNew = '{{ route('radio.playlists.c') }}';
    var dataColSort = 1;
    var dataColType = 'asc';
    var dataFunc = false;

    $('.loadPlaylist').on('click', function( event ) {
        var id = $(this).attr('id');
        var action = $(this).attr('data-action');
        Sweetalert2.fire({
            title: @json(__('radio.action_processing')),
            showConfirmButton: false,
            allowOutsideClick: false,
            allowEscapeKey: false
        });
        Sweetalert2.showLoading();

        $.post("{{ route('radio.playlists.c.loadAction') }}/"+action, { id: id, port : {{ $siteData->stream_port }} })
            .done(function( data ) {
                Sweetalert2.hideLoading();
                if(data.status){
                    Sweetalert2.fire({
                        icon: 'success',
                        title: data.message,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        timer: 3500
                    });
                    if(action == 'duplicate'){
                        setTimeout(() => {
                            window.location = "{{ route('radio.playlists.u') }}/"+data.id;
                        }, 3500);
                    }
                }else{
                    Sweetalert2.fire({
                        icon: 'error',
                        title: data.message,
                        showConfirmButton: true,
                        confirmButtonText: @json(__('radio.action_got_it'))
                    });
                }
            });

    });


    $('.removeConfirm').on('click', function( event ) {
        var id = $(this).attr('id');
        Sweetalert2.fire({
            title: @json(__('radio.playlists_remove_confirm')),
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: @json(__('general.action_remove')),
            cancelButtonText: @json(__('radio.app_action_cancel')),
        }).then((result) => {
            if (result.isConfirmed) {
                $("#form_delete_" + id).submit();
            }
        });
    });

</script>

<script src="/assets/js/pages/datatables.min.js?t=2"></script>

</body>
</html>