@extends('admin.layouts.master')

@section('title', 'Manage Category')

@section('content')
    <div class="row">
        <!-- Left Column: Category Form -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="text-left">Category Form</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('category.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Parent Category -->
                        <div class="form-group">
                            <label for="">Select Parent Category</label>
                            <select name="parent_category_id" class="form-control select2">
                                <option value="">Ex. জাতীয়/রাজনীতি/খেলা/বিনোদন</option>
                                @foreach ($pluck_categories as $key => $value)
                                    <option value="{{ $key }}"
                                        {{ old('parent_category_id') == $key ? 'selected' : '' }}>
                                        {{ $value }}
                                    </option>
                                @endforeach
                            </select>
                            @error('parent_category_id')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Name -->
                        <div class="form-group">
                            <label for="">Name</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name') }}"
                                placeholder="Ex. Breaking News, Sports, Entertainment, Politics etc.">
                            @error('name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Stream Link -->
                        <div class="form-group">
                            <label for="">Stream Link</label>
                            <input type="text" name="stream_link" class="form-control" value="{{ old('stream_link') }}"
                                placeholder="Ex. https://asiantvonline.com">
                            @error('stream_link')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- BN Name -->
                        <div class="form-group">
                            <label for="">BN Name</label>
                            <input type="text" name="bn_name" class="form-control" value="{{ old('bn_name') }}"
                                placeholder="Ex. Breaking News, Sports, Entertainment, Politics etc.">
                            @error('bn_name')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Is Mega Menu -->
                        <div class="form-group">
                            <label for="">Is Mega Menu</label>
                            <select name="is_mega_menu" class="form-control">
                                <option value="1" {{ old('is_mega_menu') == 1 ? 'selected' : '' }}>Mega Menu</option>
                                <option value="2" {{ old('is_mega_menu') == 2 ? 'selected' : '' }}>Normal Dropdown
                                    Menu</option>
                            </select>
                            @error('is_mega_menu')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Position -->
                        <div class="form-group">
                            <label for="">POSITION</label>
                            <input type="number" name="position" class="form-control" value="{{ old('position', 1) }}"
                                placeholder="Ex. 1">
                            @error('position')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Submit -->
                        <div class="form-group">
                            <button type="submit" class="btn btn-block btn-success">Save</button>
                        </div>

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

        <!-- Right Column: Categories List -->
        <div class="col-lg-8">

            <div class="card">
                <div class="card-header">
                    <h3 class="text-left">All Categories</h3>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>SL</th>
                                    <th>Parent Category</th>
                                    <th>Name</th>
                                    <th>BN Name</th>
                                    <th>Is Mega Menu</th>
                                    <th>Position</th>
                                    <th>Manage</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($categories as $key=>$info)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $info->category ? $info->category->name : '' }} </td>
                                        <td>{{ $info->id }} | {{ $info->name }}</td>
                                        <td>{{ $info->bn_name }}</td>
                                        <td>
                                            @if ($info->is_mega_menu == 1)
                                                <button type="button" class="btn btn-primary"> Mega Menu</button>
                                            @else
                                                <button type="button" class="btn btn-success"> Normal Dropdown</button>
                                            @endif
                                        </td>
                                        <td>{{ $info->position }}</td>
                                        <td>
    <a href="{{ route('category.edit', $info->id) }}" class="m-3">
        <i class="fa fa-edit text-success"></i>
    </a>

    <button
        class="btn btn-sm btn-danger delete-category"
        data-id="{{ $info->id }}"
        data-url="{{ route('category.destroy', $info->id) }}">
        <i class="fa fa-trash"></i>
    </button>
</td>

                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5">
                                            <p class="bg-danger p-10 text-center">No Category Found</p>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')


    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(() => {
            $(".table").dataTable();
        })
    </script>

    <!-- Select2 Style -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
    <!-- Select2 Script -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });


    </script>

    <script>
$(document).on('click', '.delete-category', function () {

    if (!confirm('Are you sure you want to delete?')) {
        return;
    }

    let url = $(this).data('url');
    let btn = $(this);

    $.ajax({
        url: url,
        type: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            _method: 'DELETE'
        },
        success: function (response) {
            btn.closest('tr').remove(); // remove row
            alert('Category deleted successfully');
        },
        error: function () {
            alert('Something went wrong!');
        }
    });
});
</script>


    @include('admin.component.sweetalert-script')
@endsection