@extends('layouts.master')

@section('content')

    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">Edit new subscription</h4>
                    <div class="flex-shrink-0">
                        <a href="{{ route('subscriptions.index') }}" class="btn btn-success btn-label btn-sm">
                            <i class="ri-file-list-line label-icon align-middle fs-16 me-2"></i> List subscriptions
                        </a>
                    </div>
                </div><!-- end card header -->

                <div class="card-body">
                    <div class="live-preview">
                        <form class="row g-3 needs-validation" novalidate action="{{ route('subscriptions.update', $subscription->id) }}" method="POST">

                            @csrf                                                
                            @method('PUT')

                            <div class="col-md-12">
                                <label for="cityName" class="form-label">Subscription title</label>
                                <input type="text" class="form-control"
                                       id="cityName"  placeholder="Please enter city name" value="{{ $subscription->title }}" name="title" required>
                                <div class="invalid-feedback">Subscription title is required!</div>
                            </div>
                            <div class="col-md-12">
                                <label for="short_description" class="form-label">Short description</label>
                                <textarea class="form-control" id="short_description"  placeholder="Please enter subscription description" name="short_description">{{ $subscription->short_description }}</textarea>
                            </div>
                            <div class="col-md-12">
                                <label for="long_description" class="form-label">Details</label>
                                <textarea class="ckeditor-classic form-control" id="long_description"  placeholder="Please enter subscription details" name="long_description">{!! $subscription->long_description !!}</textarea>
                            </div>
                            
                            <div class="col-md-4">
                                <label for="subscription_type_id" class="form-label">Subscription type</label>
                                <select class="form-control custom-select" id="subscription_type_id" name="subscription_type_id" required>
                                    <option {{ $subscription->subscription_type_id == ' ' ? 'selected' : null }} value="" disabled selected>Please select</option>
                                    @foreach ($types as $type)
                                        <option {{ $subscription->subscription_type_id == $type->id ? 'selected' : null }} value="{{ $type->id }}">{{ ucfirst($type->name) }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback">Subscription type is required!</div>
                            </div>

                            <div class="col-md-4">
                                <label for="subscription_type" class="form-label">Is optional</label>
                                <select class="form-control custom-select" id="is_optional" name="is_optional" required>
                                    <option {{ $subscription->is_optional == ' ' ? 'selected' : null }} value="" disabled selected>Please select</option>
                                    <option {{ $subscription->is_optional == '1' ? 'selected' : null }} value="1">Yes</option>
                                    <option {{ $subscription->is_optional == '0' ? 'selected' : null }} value="0">No</option>
                                </select>
                                <div class="invalid-feedback">This is a required field!</div>
                            </div>

                            
                            <div class="col-12 text-end">
                                <button class="btn btn-primary" type="submit">Save Changes</button>
                                <button type="button" class="btn btn-light bg-gradient waves-effect waves-light">Cancel</button>
                            </div>
                            
                        </form>
                        <div class="col-md-12">
                                <hr/>

                                <div data-simplebar > 
                                    <ul class="list-group">
                                        @foreach ($subscription->prices as $price)
                                        <li id="subscription-price-{{ $price->id }}" class="list-group-item">
                                            <form class="update-subscription-price-{{ $price->id }}">
                                                <table class="">
                                                    <tr>
                                                        <td style="width:5%">{{ $price->id }}</td>
                                                        <td>
                                                            <input type="text" class="form-control" placeholder="Please enter short description" value="{{ $price->short_description }}" name="short_description" required>
                                                        </td>
                                                        <td style="width:15%">
                                                            <input type="text" class="form-control" placeholder="Price" value="{{ $price->price }}" name="price" required>
                                                        </td>
                                                        <td style="width:15%">
                                                            <input type="text" class="form-control" placeholder="Sale price" value="{{ $price->sale_price }}" name="sale_price" required>
                                                        </td>
                                                        <td style="width:8%" class="text-center">
                                                            <button type="submit" class="btn btn-sm btn-success btn-icon waves-effect waves-light update-subscription-price-btn" data-form="update-subscription-price-{{ $price->id }}" data-url="{{ route('subscription-price.update', $price->id) }}">
                                                                <i class="ri-save-2-line"></i>
                                                            </button>
                                                            <a href="{{ route('subscription-price.destroy', $price->id) }}" data-key="subscription-price-{{ $price->id }}" class="btn btn-sm btn-danger btn-icon waves-effect waves-light delete-price" data>
                                                                <i class="ri-delete-bin-5-line"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </li>
                                        @endforeach
                                        <li class="list-group-item">
                                            <form class="save-subscription-price">
                                                <table class="">
                                                    <tr>
                                                        <td style="width:5%">
                                                            <input type="hidden" name="subscription_id" value="{{ $subscription->id }}">
                                                        </td>
                                                        <td>
                                                            <input type="text" class="form-control" placeholder="Short description" name="short_description" required>
                                                        </td>
                                                        <td style="width:15%">
                                                            <input type="number" class="form-control" placeholder="Price" name="price" required>
                                                        </td>
                                                        <td style="width:15%">
                                                            <input type="number" class="form-control" placeholder="Sale price" name="sale_price" required>
                                                        </td>
                                                        <td style="width:8%" class="text-center">
                                                            <button type="submit" class="btn btn-sm btn-success btn-icon waves-effect waves-light save-subscription-price-btn" data-form="save-subscription-price">
                                                                <i class=" ri-add-line"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </li>                       
                                    </ul>
                                </div>
                                
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection


@push('header_scripts')

    <link href="{{ asset('theme/dist/default/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />

@endpush

@push('footer_scripts')
    
    <script src="{{ asset('theme/dist/default/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script src="{{ asset('theme/dist/default/assets/libs/@ckeditor/ckeditor5-build-classic/build/ckeditor.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            var ckClassicEditor = document.querySelectorAll(".ckeditor-classic");
            ckClassicEditor.forEach(function() {
                ClassicEditor.create(document.querySelector(".ckeditor-classic")).then(function(e) {
                    e.ui.view.editable.element.style.height = "200px"
                }).catch(function(e) {
                    console.error(e)
                })
            });
        });

        $(document).on('click', '.save-subscription-price-btn', function(e) {

            e.preventDefault();

            var form = $(this).data('form');
            var formData = $('.'+form).serializeArray();

            $.ajax({

                url: "{{ route('subscription-price.store') }}",
                type: "POST",
                data: formData,
                dataType: 'json',
                headers: {
                    'X-CSRF-Token': '{{ csrf_token() }}',
                },
                cache: false,
                success: function(data) {

                    Swal.fire({
                        title: "Success",
                        text: 'record saved successfully.',
                        icon: 'success',
                        confirmButtonClass: 'btn btn-primary w-xs mt-2',
                        buttonsStyling: false,
                        showCloseButton: true
                    });

                },
                error: function() {

                },
                beforeSend: function() {

                },
                complete: function() {

                }
            });
        });

        $(document).on('click', '.update-subscription-price-btn', function(e) {

            e.preventDefault();

            var url = $(this).data('url');
            var form = $(this).data('form');
            var formData = $('.'+form).serializeArray();

            // console.log(url, form, formData);

            $.ajax({

                url: url,
                data: formData,
                type: "PUT",
                dataType: 'json',
                headers: {
                    'X-CSRF-Token': '{{ csrf_token() }}',
                },
                cache: false,
                success: function(data) {
                    Swal.fire({
                        title: "Success",
                        text: 'Record saved successfully.',
                        icon: 'success',
                        confirmButtonClass: 'btn btn-primary w-xs mt-2',
                        buttonsStyling: false,
                        showCloseButton: true
                    });
                },
                error: function() {

                },
                beforeSend: function() {

                },
                complete: function() {

                }
            });
        });

        $(document).on('click', '.delete-price', function(e) {
            e.preventDefault();

            var url = $(this).attr('href');
            var key = $(this).data('key');

            Swal.fire({
                html: '<div class="mt-3">' +
                    '<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>' +
                    '<div class="mt-4 pt-2 fs-15 mx-5">' +
                    '<h4>Are you sure?</h4>' +
                    '<p class="text-muted mx-4 mb-0">Are you Sure You want to Delete this Record ?</p>' +
                    '</div>' +
                    '</div>',
                showCancelButton: true,
                confirmButtonClass: 'btn btn-primary w-xs me-2 mb-1',
                confirmButtonText: 'Yes, Delete It!',
                cancelButtonClass: 'btn btn-danger w-xs mb-1',
                buttonsStyling: false,
                showCloseButton: true
            }).then(function(result) {

                if (result.isConfirmed) {

                    $.ajax({

                        url: url,
                        type: "DELETE",
                        // data : filters,
                        headers: {
                            'X-CSRF-Token': '{{ csrf_token() }}',
                        },
                        cache: false,
                        success: function(data) {
                            // $('#' + table).DataTable().ajax.reload(null, false);
                            $( '#' + key ).remove();
                        },
                        error: function() {

                        },
                        beforeSend: function() {

                        },
                        complete: function() {

                        }
                    });
                }
            });
        });
    </script>

@endpush