@extends('layouts.app')
@push('page_style')
    <style>
        #example1_filter {
            display: flex;
            justify-content: end;
        }

        .status-toggle {
            width: 40px;
            height: 20px;
            appearance: none;
            background-color: #dc3545; /* red */
            outline: none;
            border-radius: 20px;
            position: relative;
            cursor: pointer;
            transition: 0.4s;
        }

        .status-toggle:checked {
            background-color: #28a745; /* green */
        }

        .status-toggle::before {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 1px;
            left: 1px;
            transition: 0.4s;
        }

        .status-toggle:checked::before {
            transform: translateX(20px);
        }
    </style>
@endpush
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Shows</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                        <li class="breadcrumb-item active">Shows</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif

                    <div class="card">
                        <div class="card-body">
                            <a href="{{ route('admin.add.shows') }}">
                                <button class="btn btn-primary">Add Shows</button>
                            </a>
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>bio</th>
                                    <th>Image</th>
                                    <th>Date</th>
                                    <th>Highlight Status</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($spotlight as $item)
                                    <tr>
                                        <td>{{ $item->id }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td style="width: 50%;">
                                            {{ Illuminate\Support\Str::limit($item->bio, $limit = 100, $end = '...') }}

                                        </td>
                                        <td>
                                            @foreach ($item->profile_img as $image)
                                                <img src="{{ $image->getUrl() }}" alt="{{ $image->name }}" width="100" height="100">
                                            @endforeach
                                        </td>
                                        <td>
                                            {{ \Carbon\Carbon::parse($item->updated_at)->format('l, M j')  }}
                                        </td>
                                        <td>
                                            {{ $item->highlight_status }}
                                        </td>
                                        <td>
                                            <input type="checkbox"
                                                       class="status-toggle"
                                                       data-id="{{ $item->id }}"
                                                       {{ $item->status ? 'checked' : '' }}
                                                >
                                        </td>

                                        <td>
                                            <button class="btn btn-warning" data-toggle="modal" data-target="#shows-status-{{ $item->id }}">Highlight</button>
                                            <a href="{{ route('admin.edit.shows', $item->id) }}" class="btn btn-primary">Edit</a>
                                            <a href="{{ route('admin.shows.destroy', $item->id) }}" class="btn btn-danger">Delete</a>
                                        </td>
                                    </tr>
                                    <div class="modal fade shows-highlight" id="shows-status-{{ $item->id }}" tabindex="-1" aria-labelledby="shows-highlightLabel-{{ $item->id }}" aria-modal="true">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Shows Highlights</h5>
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                        <span aria-hidden="true">×</span>
                                                    </button>
                                                </div>
                                                <div class="modal-body">
                                                    <form  method="post" action="{{ route('admin.shows.highlight.status', ['shows' => $item->id]) }}">
                                                        @csrf
                                                        <div class="form-group">
                                                            <label>Status</label>
                                                            <select name="status" class="form-control">
                                                                <option value="1" {{ $item->highlight_status === '1' ? 'selected' : '' }}>Active</option>
                                                                <option value="0" {{ $item->highlight_status === '0' ? 'selected' : '' }}>Inactive</option>
                                                            </select>
                                                        </div>
                                                        <div class="formdata">
                                                            <button type="submit" class="btn btn-success">Update</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection
@yield('script')

<script>
    document.addEventListener('DOMContentLoaded', function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        })
        document.body.addEventListener('change', function (e) {
            if (e.target.classList.contains('status-toggle')) {
                const checkbox = e.target;
                const id = checkbox.dataset.id;
                const status = checkbox.checked ? 1 : 0;


                $.ajax({
                    url:"{{ route('admin.shows.status.update') }}",
                    method:"POST",
                    dataType: "json",
                    data:{id :id,status:status},
                    success:function(res){
                        toastr.success(res.success);
                    }
                });


            }
        });
    });
</script>