@extends('backEnd.layouts.master')
@section('title', 'Video Manage')

@section('css')
    <link href="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css"
        rel="stylesheet" type="text/css" />
    <link href="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css"
        rel="stylesheet" type="text/css" />
    <link href="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css"
        rel="stylesheet" type="text/css" />
    <link href="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-select-bs5/css/select.bootstrap5.min.css"
        rel="stylesheet" type="text/css" />
        
@endsection

@section('content')
<style>
    /* Table General Styling */
    .table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    .table thead th {
        background-color: #f8f9fa;
        border: none;
        color: #6c757d;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
        padding: 15px;
    }
    .table tbody tr {
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        transition: all 0.2s ease;
    }
    .table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        background-color: #fdfdfd !important;
    }
    .table td {
        padding: 15px !important;
        vertical-align: middle;
        border: none;
    }
    /* Video & Thumbnail Styling */
    .video-preview-box {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border: 1px solid #eee;
    }
    /* Status Badge Styling */
    .status-btn {
        border-radius: 50px;
        padding: 4px 12px;
        font-weight: 600;
        font-size: 11px;
        border: none;
        letter-spacing: 0.5px;
    }
    .btn-success-soft {
        background-color: #d1fae5;
        color: #065f46;
    }
    .btn-secondary-soft {
        background-color: #f3f4f6;
        color: #374151;
    }
    /* Action Button Styling */
    .action-icon-btn {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        transition: 0.3s;
    }
    .action-icon-btn:hover {
        transform: scale(1.1);
    }
</style>
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <a href="{{ route('campaign.create') }}" class="btn btn-primary rounded-pill" data-bs-toggle="modal"
                            data-bs-target="#createVideoModal">Create</a>
                    </div>
                    <h4 class="page-title">Video Page Manage</h4>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-12">
                {{-- <div class="card">
                    <div class="card-body">
                        <form action="{{ route('campaign.videos.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <input type="text" name="title" placeholder="Video title">

                            <br><br>

                            <input type="file" name="video" required>

                            <br><br>

                            <label><input type="checkbox" name="pages[]" value="home"> Home</label>
                            <label><input type="checkbox" name="pages[]" value="campaign"> Campaign</label>
                            <label><input type="checkbox" name="pages[]" value="landing"> Landing</label>

                            <br><br>

                            <button type="submit">Upload</button>
                        </form>



                    </div> <!-- end card body-->
                </div> <!-- end card --> --}}
                {{-- <div class="w- w-100 d-flex justify-content-center align-items-center">
                    <h2>videos manage</h2>
                     <button type="button" class="btn btn-danger rounded-pill" data-bs-toggle="modal"
                            data-bs-target="#createVideoModal">
                            <i class="fe-shopping-cart"></i> Add Video
                    </button>
                </div> --}}

                <hr>

                <div class="table-responsive">
                    <table class="table nowrap w-100">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Thumbline</th>
                                <th>Video</th>
                                <th>Pages</th>
                                <th>Status</th>
                                <th>Action</th>
                                <th>Action</th>
                            </tr>
                        </thead>

                        <tbody class="bg-transparent"> @foreach ($videos as $key => $video)
        <tr>
            <td class="fw-bold text-muted">{{ $key + 1 }}</td>

            <td>
                <div class="video-preview-box" style="width: 120px;">
                    <img src="{{ asset($video->thumbnail) }}" alt="Thumbnail" class="img-fluid">
                </div>
            </td>

            <td>
                <div class="video-preview-box" style="width: 120px;">
                    <video width="120" class="d-block">
                        <source src="{{ asset($video->video) }}">
                    </video>
                </div>
            </td>

            <td>
                @php $pages = $video->pages ?? []; @endphp
                @foreach($pages as $page)
                    <span class="badge bg-soft-primary text-primary border border-primary-subtle px-2 py-1 rounded-pill small">
                        {{ ucfirst($page) }}
                    </span>
                @endforeach
            </td>

            <td>
                <form action="{{ route('campaign.videos.status', $video->id) }}" method="POST">
                    @csrf @method('PATCH')
                    <button type="submit" class="status-btn {{ $video->status ? 'btn-success-soft' : 'btn-secondary-soft' }}">
                        <i class="fa fa-circle font-10 me-1"></i>
                        {{ $video->status ? 'LIVE' : 'OFFLINE' }}
                    </button>
                </form>
            </td>

            <td>
                 <a href="#" class="edit-product action-icon-btn btn btn-soft-info" data-id="{{$video->id}}" data-bs-toggle="modal"
                    data-bs-target="#editVideoModal" title="Edit">
                    <i class="fe-edit-2"></i>
                </a>
            </td>
            
            <td>
                <form action="{{ route('campaign.videos.delete', $video->id) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                    @csrf @method('DELETE')
                    <button class="action-icon-btn btn btn-soft-danger border-0">
                        <i class="fe-trash-2"></i>
                    </button>
                </form>
            </td>
        </tr>
    @endforeach
</tbody>
                    </table>
                </div>


            </div><!-- end col-->
        </div>
    </div>

    @include('backEnd.campaign.videos.create_modal')
    {{-- @include('backEnd.campaign.videos.edit_modal') --}}

    <!-- Edit Product Modal -->
    <div class="modal fade" id="editVideoModal" tabindex="-1" aria-labelledby="editVideoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editVideoModalLabel">Edit Product</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="edit_modal_body">
                    <!-- Ajax Content -->
                </div>
            </div>
        </div>
    </div>
@endsection


@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        });

        // Edit Product Click
        $(document).on('click', '.edit-product', function(e) {
            e.preventDefault();
            let id = $(this).data('id');
            $('#edit_modal_body').html(
                '<div class="text-center p-4"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');

            $.ajax({
                url: "{{ url('campaign/videos') }}/" + id + "/edit",
                type: "GET",
                success: function(response) {
                    $('#edit_modal_body').html(response);
                }
            });
        });

        // // STATUS TOGGLE
        // $('.video-status').change(function () {
        //     let id = $(this).data('id');
        //     let status = $(this).is(':checked') ? 1 : 0;

        //     $.ajax({
        //         url: '/campaign/videos/' + id + '/status-ajax',
        //         type: 'PATCH',
        //         data: { status: status },
        //     });
        // });

        // // PAGE CHANGE
        // $('.video-pages').change(function () {
        //     let id = $(this).data('id');
        //     let pages = $(this).val();

        //     $.ajax({
        //         url: '/campaign/videos/' + id + '/pages-ajax',
        //         type: 'PATCH',
        //         data: { pages: pages },
        //     });
        // });





        
            // $("#createProductModal #subcategory_id").on("change", function () {
            //     var ajaxId = $(this).val();
            //     if (ajaxId) {
            //         $.ajax({
            //             type: "GET",
            //             url: "{{url('ajax-product-childcategory')}}?subcategory_id=" + ajaxId,
            //             success: function (res) {
            //                 if (res) {
            //                     $("#createProductModal #childcategory_id").empty();
            //                     $("#createProductModal #childcategory_id").append('<option value="0">Choose...</option>');
            //                     $.each(res, function (key, value) {
            //                         $("#createProductModal #childcategory_id").append('<option value="' + key + '">' + value + "</option>");
            //                     });
            //                 } else {
            //                     $("#createVideoModal #childcategory_id").empty();
            //                 }
            //             }
            //         });
            //     }
            // });
    </script>







    <!-- third party js -->
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-bs5/js/dataTables.bootstrap5.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js">
    </script>
    <script
        src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js">
    </script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js">
    </script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-keytable/js/dataTables.keyTable.min.js">
    </script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/datatables.net-select/js/dataTables.select.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/pdfmake/build/pdfmake.min.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/libs/pdfmake/build/vfs_fonts.js"></script>
    <script src="{{ asset('/public/backEnd/') }}/assets/js/pages/datatables.init.js"></script>
    <!-- third party js ends -->
@endsection