@extends('layouts.app')
@section('content')


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

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    @if(session('success') || session('error'))
                        <div class="alert {{ session('success') ? 'alert-success' : 'alert-danger' }}">
                            {{ session('success') ?? session('error') }}
                        </div>
                    @endif
                    <div class="card card-primary">
                        <form method="post" action="{{ route('admin.package.store') }}"
                              enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <div class="form-group">
                                    <label for="name">Name</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           placeholder="Enter Name" required>
                                </div>

                                <div class="form-group">
                                    <label for="detail">Detail</label>
                                    <textarea type="text" class="form-control" id="detail" name="detail"
                                              required></textarea>
                                </div>

                                <div class="form-group">
                                    <label for="price">Price</label>
                                    <input type="text" class="form-control" id="price" name="price"
                                           placeholder="Enter Price" required>
                                </div>


                                <h3>Select Package Type</h3>
                                <div class="row">
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <label for="standard">Standard</label>
                                            <input type="radio" id="standard" value="standard" name="packageType" required checked>
                                        </div>
                                    </div>
                                    <div class="col-md-1">
                                        <div class="form-group">
                                            <label for="addon">Addon</label>
                                            <input type="radio" id="addon" value="addon" name="packageType" required>
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group" id="standard-package">
                                    <h3>Select Features</h3>
                                    <br>
                                    <div class="row">
                                        @foreach($feature as $val)
                                            @if($val->addon == 0)
                                                <div class="col-md-2">
                                                    <label for="feature_{{ $val->id }}">
                                                        {{ $val->name }}
                                                        <input type="checkbox" class="form-control"
                                                               id="feature_{{ $val->id }}" value="{{ $val->id }}"
                                                               name="feature[]">
                                                    </label>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <div class="form-group" id="addon-package">
                                    <h3>Select Addon Features</h3>
                                    <br>
                                    <div class="row">
                                        @foreach($feature as $val)
                                            @if($val->addon == 1)
                                                <div class="col-md-2">
                                                    <label for="feature_{{ $val->id }}">
                                                        {{ $val->name }}
                                                        <input type="checkbox" class="form-control"
                                                               id="feature_{{ $val->id }}" value="{{ $val->id }}"
                                                               name="feature[]">
                                                    </label>
                                                </div>
                                            @endif
                                        @endforeach
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="addon_id">Type</label>
                                    <select name="type" id="type" class="form-control" required>
                                        <option value="">Select Type</option>
                                        <option value="monthly">Monthly</option>
                                        <option value="one_time">One Time</option>
                                    </select>
                                </div>

                                <div class="form-group" id="select-addon">
                                    <label for="addon_id">Addon Package</label>
                                    <select name="addon_id" id="addon_id" class="form-control">
                                        <option value="">Select Addon</option>
                                        @foreach($package as $val)
                                            <option value="{{ $val->id }}">{{ $val->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

@push('comics_script')

    <script>

        $('#addon-package').hide()

        $(document).ready(function() {
            $('#standard, #addon').click(function() {
                $('#addon-package input[type="checkbox"]').prop('checked', false);
                $('#standard-package input[type="checkbox"]').prop('checked', false);

                $('#addon-package, #standard-package, #select-addon').toggle();
            });
        });

        document.addEventListener("DOMContentLoaded", function () {
            let counter = 1;

            const addButton = document.getElementById("add-image");
            const imageContainer = document.getElementById("image-container");

            addButton.addEventListener("click", function () {
                counter++;

                const newInput = document.createElement("div");
                newInput.className = "form-group";
                newInput.innerHTML = `
                <label for="img${counter}">Image</label>
                <div class="input-group">
                    <input type="file" class="form-control" name="img[]" id="img${counter}">
                    <button type="button" class="delete-image btn btn-danger">Delete</button>
                </div>`;

                imageContainer.appendChild(newInput);

                newInput.querySelector(".delete-image").addEventListener("click", function () {
                    newInput.remove();
                });
            });

            document.querySelector(".delete-image").addEventListener("click", function () {
                document.querySelector(".form-group").remove(); // Remove the initial row
            });
        });
    </script>
@endpush