@extends('front.layouts.front')
@section('maincss')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
@endsection
@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Custom Channels</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section">
        <div class="container">
            <ul class="nav nav-tabs profile__tabs border-bottom mb-5" id="profile__tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1" aria-selected="true">MY Channel</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">Subscribed Channel</a>
                </li>
            </ul>
            <!-- content tabs -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab-1" role="tabpanel">
                    <form action="{{ route('front.custom-channel.index') }}" method="get" id="newsfilter">
                        <div class="sort justify-content-between">
                            <div class="filter__group filter__group--sort w-100 mr-3">
                                <label for="search" class="filter__label">Search:</label>
                                <input class="filter__input" name="q" id="search" type="text" placeholder="Search Channel..." />
                            </div>

                            <div class="buttonWithLoder mr-3">
                                <button type="submit" class="btn header__login"><span>Search</span></button>
                            </div>
                            <div class="buttonWithLoder">
                                <a href="{{ route('front.custom-channel.create') }}" class="btn header__login form__btn">Add </a>
                            </div>
                        </div>
                    </form>
                    {{-- End:: search --}}

                    {{-- Begin:: Channel list --}}
                    <div class="row">
                        @foreach ($channels as $channel)
                            <div class="col-md-6">
                                <a href="{{ route('front.custom-channel.show', [$channel->uuid]) }}">
                                    <div class="fans-block align-items-start">
                                        <div><img src="{{ $channel->logo }}" alt="{{ $channel->name }}"></div>
                                        <div>
                                            <h5>{{ $channel->name }}</h5>
                                            <small class="text-muted">{{ $channel->description }}</small>
                                        </div>
                                        <div class="switch-wrapper ml-auto">
                                            <input type="checkbox" id="channel{{ $channel->id }}" data-id="{{ $channel->id }}" class="switch-input status" @if($channel->status == 1) checked @endif>
                                            <label for="channel{{ $channel->id }}" class="switch-label"></label>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                    {{-- End:: Channel list --}}
                </div>
                <div class="tab-pane fade" id="tab-2" role="tabpanel">
                    <form action="{{ route('front.customchannel.search') }}" method="post" id="searchfilter">
                        @csrf
                        <div class="sort justify-content-between">
                            <div class="filter__group filter__group--sort w-100 mr-3">
                                <label for="searchch" class="filter__label">Search:</label>
                                <input class="filter__input" name="q" id="searchch" type="text" placeholder="Search Channel..." />
                            </div>

                            <div class="buttonWithLoder mr-3">
                                <button type="submit"  class="btn header__login"><span>Search</span></button>
                            </div>
                        </div>
                    </form>
                    <div class="row channellist"></div>

                    <div class="row">
                        @foreach ($subcribed as $channels)
                            <div class="col-md-6 remove">
                                <a href="{{ route('front.custom-channel.show', [$channels->channel->uuid]) }}">
                                    <div class="fans-block align-items-start">
                                        <div><img src="{{ $channels->channel->logo }}" alt="{{ $channels->channel->name }}"></div>
                                        <div>
                                            <h5>{{ $channels->channel->name }}</h5>
                                            <small class="text-muted">{{ $channels->channel->description }}</small>
                                        </div>
                                        <div class="ml-auto">
                                            <button class="btn btn-theme text-white subscribed" data-id="{{$channels->id}}" data-type="1">Subscribed</button>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
<script>
    $(document).on("click", ".status", function () {
        var id = $(this).data("id");
        $.ajax({
            type: "post",
            url: "{{ route('front.customchannel.status',['_id']) }}".replace('_id', id),
            dataType: "json",
            success: function (response) {
                var notyf = new Notyf();
                notyf.success({
                    message: response.message,
                    duration: 5000,
                    position: {
                        x: 'center',
                        y: 'top',
                    },
                });
            },
        });
    });

    $(document).on('submit','#searchfilter', function (e){
        e.preventDefault();
        let search = $('#searchch').val();
        $.ajax({
            type: "post",
            url: "{{ route('front.customchannel.search') }}",
            dataType: "json",
            data : $(this).serialize(),
            success: function (response) {
                let html = '';
                response.data.forEach(element => {
                    let route = "{{ route('front.custom-channel.show', ['_id']) }}".replace('_id', element.uuid);
                    html += `<div class="col-md-6">
                        <a href="${route}">
                            <div class="fans-block align-items-start">
                                <div><img src="${element.logo}" alt="${element.name}"></div>
                                <div>
                                    <h5>${element.name}</h5>
                                    <small class="text-muted">${element.description}</small>
                                </div>
                                <div class="ml-auto">
                                    <button class="btn btn-theme text-white subscribed" data-id="${element.id}" data-type="0">Subscribe Now</button>
                                </div>
                            </div>
                        </a>
                    </div>`;
                });
                $('.channellist').html(html);
            },
        });
    });

    $(document).on('click', '.subscribed', function(e){
        e.preventDefault();
        let th = $(this);
        let id = th.attr('data-id');
        let type = th.attr('data-type');
        $.ajax({
            type: "post",
            url: "{{ route('front.customchannel.subscribe',['_id']) }}".replace('_id', id),
            dataType: "json",
            success: function (response) {
                if(response.type == 1){
                    th.html('Subscribed');
                } else {
                    th.html('Subscribe Now');
                }
                var notyf = new Notyf();
                notyf.success({
                    message: response.message,
                    duration: 5000,
                    position: {
                        x: 'center',
                        y: 'top',
                    },
                });
                if(type == 1) {
                    $(th).closest('.remove').remove();
                }
            },
        });
    });
</script>
@endsection