@extends('admin.layouts.master')

@section('title', 'Manage Daily Video')

@section('content')

    <div class="row">

        {{-- ========================= --}}
        {{--   VIDEO CREATE BUTTON     --}}
        {{-- ========================= --}}
        <div class="col-lg-12 mb-3">
            <button class="btn btn-primary" data-toggle="modal" data-target="#createVideoModal">
                <i class="fa fa-plus"></i> Add New Video
            </button>

            <a class="btn btn-info ml-2" href="{{ route('video.category.create') }}">
                <i class="fa fa-plus"></i> Add Category
            </a>
        </div>

        {{-- ========================= --}}
        {{--       VIDEO TABLE         --}}
        {{-- ========================= --}}
        <div class="col-lg-12">
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h4 class="mb-0">All News Programs</h4>
                </div>

                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>#</th>
                                    <th>Created By</th>
                                    <th>Category</th>
                                    <th>Title</th>
                                    <th>Sub Title</th>
                                    <th>Video</th>
                                    <th>Thumbnail</th>
                                    <th width="120">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($schedules as $item)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $item->createdBy->name ?? 'NULL' }}</td>
                                        <td>{{ $item->category->name ?? 'NULL' }}</td>
                                        <td>{{ $item->title }}</td>
                                        <td>{{ $item->sub_title }}</td>
                                        <td>
                                            <a href="{{ $item->video_link }}" target="_blank">Open</a>
                                        </td>
                                        <td>
                                            @if ($item->thumbnail)
                                                <img src="{{ asset($item->thumbnail) }}" width="60" height="60"
                                                    class="rounded">
                                            @else
                                                <img src="https://img.youtube.com/vi/{{ $item->video_link }}/hqdefault.jpg"
                                                    width="60" height="60" class="rounded">
                                            @endif
                                        </td>
                                        <td>
                                            <div class="dropdown">
                                                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button"
                                                    id="actionMenu{{ $item->id }}" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    Actions
                                                </button>
                                                <div class="dropdown-menu" aria-labelledby="actionMenu{{ $item->id }}">
                                                    {{-- Edit Button --}}
                                                    <a class="dropdown-item" href="{{ route('video.edit',$item->id) }}">
                                                        <i class="fa fa-edit text-primary"></i> Edit
                                                </a>

                                                    {{-- Delete Button --}}
                                                    <a class="dropdown-item text-danger"
                                                        href="{{ route('video.destroy', $item->id) }}"
                                                        onclick="return confirm('Are you sure?')">
                                                        <i class="fa fa-trash"></i> Delete
                                                    </a>
                                                </div>
                                            </div>
                                        </td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center p-3">No Data Found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="card-footer">
                    {{ $schedules->links() }}
                </div>

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

    {{-- ======================================================= --}}
    {{--                VIDEO CREATE MODAL                        --}}
    {{-- ======================================================= --}}
    <div class="modal fade" id="createVideoModal">
        <div class="modal-dialog modal-lg">
            <form action="{{ route('video.store') }}" method="POST" enctype="multipart/form-data" class="modal-content">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Add New Video</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Sub Title</label>
                            <input type="text" name="sub_title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Video Link</label>
                            <input type="text" name="video_link" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Category</label>
                            <select name="category_id" class="form-control">
                                <option value="">Select</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Date</label>
                            <input type="date" name="date" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Start Datetime</label>
                            <input type="datetime-local" name="start_datetime" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>End Datetime</label>
                            <input type="datetime-local" name="end_datetime" class="form-control">
                        </div>

                        <div class="form-group col-md-12">
                            <label>Thumbnail</label>
                            <input type="file" name="thumbnail" class="form-control" accept="image/*"
                                onchange="previewCreateThumb(event)">
                            <img id="createThumbPreview" src="https://placehold.co/250x150?text=Thumbnail"
                                class="img-thumbnail mt-2" width="200">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>

    {{-- ======================================================= --}}
    {{--               VIDEO EDIT MODAL                           --}}
    {{-- ======================================================= --}}
    <div class="modal fade" id="editModal">
        <div class="modal-dialog modal-lg">
            <form id="editForm" method="POST" enctype="multipart/form-data" class="modal-content">
                @csrf
                @method('PUT')
                <div class="modal-header">
                    <h5 class="modal-title">Edit Video</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <div class="modal-body">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label>Title</label>
                            <input type="text" name="title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Sub Title</label>
                            <input type="text" name="sub_title" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Video Link</label>
                            <input type="text" name="video_link" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Category</label>
                            <select name="category_id" class="form-control">
                                <option value="">Select</option>
                                @foreach ($categories as $cat)
                                    <option value="{{ $cat->id }}">{{ $cat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-md-6">
                            <label>Start Datetime</label>
                            <input type="datetime-local" name="start_datetime" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>End Datetime</label>
                            <input type="datetime-local" name="end_datetime" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Date</label>
                            <input type="date" name="date" class="form-control">
                        </div>
                        <div class="form-group col-md-6">
                            <label>Status</label>
                            <select name="status" class="form-control">
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                        <div class="form-group col-md-12">
                            <label>Thumbnail</label>
                            <input type="file" name="thumbnail" class="form-control" accept="image/*"
                                onchange="previewEditThumb(event)">
                            <img id="editThumbPreview" src="https://placehold.co/250x150?text=Thumbnail"
                                class="img-thumbnail mt-2" width="200">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-primary">Update</button>
                </div>
            </form>
        </div>
    </div>
@endsection