@extends('layouts.admin-layout')
@section('title')
    Edit Package
@endsection
@section('content')
    <style>
        .active {
            background-color: #007BFF !important;
            color: white !important;
        }

        .rating {
            width: 400px;
            height: 50px;
            margin: 0 auto;
            padding: 1px 99px;
            border: 1px solid #ccc;
            border-radius: 10px;
            background: #f9f9f9;
        }

        .rating label {
            float: right;
            position: relative;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .rating label:not(:first-of-type) {
            padding-right: 2px;
        }

        .rating label:before {
            content: "\2605";
            font-size: 42px;
            color: #ccc;
            line-height: 1;
        }

        .rating label.active-star::before {
            color: #f9df4a;
        }

        .rating input {
            display: none;
        }

        .rating input:checked~label:before,
        .rating:not(:checked)>label:hover:before,
        .rating:not(:checked)>label:hover~label:before {
            color: #f9df4a;
        }
    </style>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">

                        <div class="card card-box-shadow mt-5">

                            <div class="card-header">
                                <h3 class="card-title">Edit Package</h3>
                                <a href="{{ route('admin.package.list') }}" class="btn btn-primary btn-sm float-right mr-5 ">

                                    Back

                                </a>
                            </div>

                            <!-- /.card-header -->
                            <div class="card-body">

                                <form action="{{ route('admin.package.update', $find_package->id) }}" method="POST"
                                    enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">


                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="Name">Name *</label>
                                                <input type="text" class="form-control form__field" name="name"
                                                    value="{{ $find_package->name ?? '' }}" required>
                                            </div>

                                            <small class="text-danger">
                                                @error('name')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="Name">Price *</label>
                                                <input type="number" class="form-control form__field" name="price"
                                                    step="1.0" min="1" required
                                                    value="{{ $find_package->price ?? '' }}">
                                            </div>

                                            <small class="text-danger">
                                                @error('price')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>
                                        <div class="col-md-4">
                                            <label for="Name">Package Type *</label>
                                            <select name="package_type" class="form-control form__field">
                                                <option value="month"
                                                    {{ isset($find_package) && $find_package->package_type == 'month' ? 'selected' : '' }}>
                                                    Monthly</option>
                                                <option value="day"
                                                    {{ isset($find_package) && $find_package->package_type == 'day' ? 'selected' : '' }}>
                                                    Day</option>
                                                <option value="year" disabled
                                                    {{ isset($find_package) && $find_package->package_type == 'year' ? 'selected' : '' }}>
                                                    Yearly</option>
                                            </select>
                                        </div>


                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="Name">Package Type Info *</label>
                                                <input type="text" class="form-control form__field"
                                                    name="package_type_info" required
                                                    value="{{ $find_package->package_type_info ?? '' }}">
                                            </div>

                                            <small class="text-danger">
                                                @error('package_type_info')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="Name">Info *</label>
                                                <input type="text" class="form-control form__field" name="info"
                                                    required value="{{ $find_package->info ?? '' }}">
                                            </div>

                                            <small class="text-danger">
                                                @error('info')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>


                                        <div class="col-md-6">
                                            <label for="">Short Description</label>
                                            <textarea name="short_description" rows="4" placeholder="Description" class="form-control form__field"
                                                id="summernote1">{!! $find_package->short_description !!}</textarea>
                                            <small class="text-danger">
                                                @error('short_description')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-6">
                                            <label for="">Description</label>
                                            <textarea name="description" rows="4" placeholder="Description" class="form-control form__field" id="summernote2">{!! $find_package->description !!}</textarea>
                                            <small class="text-danger">
                                                @error('description')
                                                    {{ $message }}
                                                @enderror
                                            </small>
                                        </div>

                                        <div class="col-md-12 mt-5">
                                            <div class="form-group pt-4">
                                                <div class="card card-box-shadow">
                                                    <h5 class="card-header bg-dark text-white">
                                                        Edit Package Variation
                                                        <button type="button"
                                                            class="btn btn-sm btn-outline-light float-right addProductVariation">
                                                            <i class="la la-fw la-plus"></i>Add Package Variation
                                                        </button>
                                                    </h5>

                                                    <div class="card-body addProductVariationField">

                                                        @if (isset($find_package->addons))
                                                            @foreach ($find_package->addons as $index => $addon)
                                                                <div class="row form-section product-variation-data mb-4 mt-4"
                                                                    id="formSection{{ $index }}">
                                                                    <div class="col-md-12">
                                                                        <button type="button"
                                                                            class="custom_btn_sm_back custom_btn btn-sm float-right productVariationRemoveBtn"
                                                                            data-get-remove-section="{{ $addon->id }}">
                                                                            <i class="fas fa-trash-alt"></i> Remove
                                                                        </button>
                                                                    </div>

                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label>Select Addon:</label>
                                                                            <select name="addon_id[]"
                                                                                class="form-control form__field">
                                                                                @foreach ($addons as $availableAddon)
                                                                                    <option
                                                                                        value="{{ $availableAddon->id }}"
                                                                                        {{ $addon->id == $availableAddon->id ? 'selected' : '' }}>
                                                                                        {{ $availableAddon->title }}
                                                                                    </option>
                                                                                @endforeach
                                                                            </select>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label for="title[]"> Title:</label>
                                                                            <input type="text" name="title[]"
                                                                                value="{{ $addon->pivot->title }}"
                                                                                class="form-control form__field">
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label for="price[]"> Price:</label>
                                                                            <input type="number" name="addon_price[]"
                                                                                value="{{ $addon->pivot->addon_price }}"
                                                                                class="form-control form__field"
                                                                                min="1">
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label for="line[]"> Line:</label>
                                                                            <input type="text" name="line[]"
                                                                                value="{{ $addon->pivot->line ?? '' }}"
                                                                                class="form-control form__field"
                                                                                min="1">
                                                                        </div>
                                                                    </div>


                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label for="text[]"> Note:</label>
                                                                            <input type="text" name="note[]"
                                                                                value="{{ $addon->pivot->note ?? '' }}"
                                                                                class="form-control form__field"
                                                                                min="1">
                                                                        </div>
                                                                    </div>
                                                                    <input type="hidden" name="is_fleet[{{ $loop->index }}]" value="0">

                                                                    <div class="col-md-4 mt-4">
                                                                        <div class="form-group">
                                                                            <label for="text[]"> Is Fleet:</label>
                                                                            <input type="checkbox" class="form-control" name="is_fleet[{{ $loop->index }}]" id="is_fleet_{{ $loop->index }}"
                                                                            value="1"
                                                                            {{ isset($addon->pivot->is_fleet) && $addon->pivot->is_fleet == 1 ? 'checked' : '' }}>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            @endforeach
                                                        @else
                                                            <div class="row form-section">
                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label>Select Addon:</label>
                                                                        <select name="addon_id[]"
                                                                            class="form-control form__field ">
                                                                            <option value="" disabled>Select Colour
                                                                            </option>
                                                                            @foreach ($addons as $addon)
                                                                                <option value="{{ $addon->id }}">
                                                                                    {{ $addon->title }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for=""> Title:</label>
                                                                        <input type="text" name="title[]"
                                                                            class="form-control form__field">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="price[]"> Price:</label>
                                                                        <input type="number" name="addon_price[]"
                                                                            class="form-control form__field"
                                                                            min="1">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="line[]"> Line:</label>
                                                                        <input type="text" name="line[]"
                                                                            class="form-control form__field"
                                                                            min="1">
                                                                    </div>
                                                                </div>


                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="text[]"> Note:</label>
                                                                        <input type="text" name="note[]"
                                                                            class="form-control form__field"
                                                                            min="1">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="is_fleet[]"> Is Fleet:</label>
                                                                        <input type="checkbox" name="is_fleet[]"
                                                                            class="form-control " min="1">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mx-auto mt-5">
                                            <div class="form-group">
                                                <input type="submit" class="form-control btn btn-primary btn-sm "
                                                    value="Submit">
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                            <!-- /.card-body -->
                        </div>

                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
@endsection

@section('script')
    <script>
        $('#summernote1').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });
        $('#summernote2').summernote({
            placeholder: 'Hello Admin',
            tabsize: 2,
            height: 100
        });
    </script>


    <script>
        $('.addProductVariation').on('click', function() {
            var randomId = Math.floor(Math.random() * 10000);
            var newFormSection = `
            <div class="row form-section product-variation-data mb-4 mt-4" id="formSection${randomId}">

                                 <div class="col-md-12">
                                      <button type='button' class="custom_btn_sm_back custom_btn btn-sm float-right productVariationRemoveBtn">
                                        <i class="fas fa-trash-alt"></i> Remove
                                    </button>
                                 </div>
                                                               <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label>Select Addon:</label>
                                                                        <select name="addon_id[]"
                                                                            class="form-control form__field ">
                                                                            <option value="" disabled>Select Colour
                                                                            </option>
                                                                            @foreach ($addons as $addon)
                                                                                <option value="{{ $addon->id }}">
                                                                                    {{ $addon->title }}
                                                                                </option>
                                                                            @endforeach
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="title[]"> Title:</label>
                                                                        <input type="text" name="title[]"
                                                                            class="form-control form__field">
                                                                    </div>
                                                                </div>

                                                                <div class="col-md-4 mt-4">
                                                                    <div class="form-group">
                                                                        <label for="price[]"> Price:</label>
                                                                        <input type="number" name="addon_price[]"
                                                                            class="form-control form__field" min="1">
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-4 mt-4">
                                                                <div class="form-group">
                                                                    <label for="line[]"> Line:</label>
                                                                    <input type="text" name="line[]"
                                                                        class="form-control form__field" min="1">
                                                                </div>
                                                            </div>


                                                            <div class="col-md-4 mt-4">
                                                                <div class="form-group">
                                                                    <label for="note[]"> Note:</label>
                                                                    <input type="text" name="note[]"
                                                                        class="form-control form__field" min="1">
                                                                </div>
                                                            </div>
                                                            <div class="col-md-4 mt-4">
                                                                <div class="form-group">
                                                                    <label for="is_fleet[]"> Is Fleet:</label>
                                                                    <input type="checkbox" name="is_fleet[]"
                                                                        class="form-control " min="1">
                                                                </div>
                                                            </div>
             </div>`;
            $('.addProductVariationField').append(newFormSection);
        });

        let removedVariationIds = [];

        $(document).on('click', '.productVariationRemoveBtn', function() {
            const variationId = $(this).data('get-remove-section');

            if (variationId) {
                removedVariationIds.push(variationId);

            }
            $(this).closest('.form-section').remove();
        });
        console.log(removedVariationIds)

        $('form').on('submit', function() {
            $('<input>').attr({
                type: 'hidden',
                name: 'remove_ProductVariation',
                value: JSON.stringify(removedVariationIds)
            }).appendTo('form');
        });
    </script>
@endsection