@extends('admin.layouts.app')
@section('content')
    <div class=" content-body default-height">
        <div class="container-fluid">
            <div class="page-titles">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">@lang('admin.dashboard')</a></li>
                    <li class="breadcrumb-item"><a href="{{route('admin.subscriptions.index')}}">@lang('admin.subscriptions')</a></li>
                    <li class="breadcrumb-item active"><a href="{{route('admin.subscriptions.create')}}"></a>@lang('admin.create')</li>
                </ol>
            </div>
            <div class="row">
                <div class="col-xl-12 col-lg-12">
                    <div id="alert-placeholder"></div>

                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">@lang('admin.create')</h4>
                        </div>
                        <div class="card-body">
                            <div class="basic-form">
                                <form id ="subscriptionForm" action="{{ route('admin.subscriptions.store') }}" method="POST">
                                    @csrf
                                    <div class="row mb-3">
                                        <div class="col-lg-6">
                                            <!-- Business -->
                                            <label class="form-label">@lang('admin.business_name')</label>
                                                <select name="business_id" id="business_id" class="form-control" required data-placeholder="@lang('admin.select')">
                                                    <option value="">@lang('admin.select')</option>
                                                    @foreach ($businesses as $business)
                                                        <option value="{{ $business->id }}">
                                                            {{ $business->name }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            <span class="text-danger" id="error-business_id"></span>
                                        </div>
                                        <div class="col-lg-6">
                                            <!-- start_date -->
                                            <label class="form-label">@lang('admin.start_date')</label>
                                            <input type="date" id="start_date" name="start_date" class="form-control" required>
                                            <span class="text-danger" id="error-start_date"></span>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary"
                                        style="margin-top: 30px;">@lang('admin.create')</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .hidden {
          display: none;
        }
    </style>
@endsection
@section('script')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $('#subscriptionForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                var formData = new FormData(this);
                //formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.href = response.redirect;
                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });


            $('#business_id').select2()
        });
    </script>
    <style>
        .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
          min-height: 56px;
          border: 1px solid #E6E6E6;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow, .select2-container--default .select2-selection--single .select2-selection__arrow {
          top: 16px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
          line-height: 52px;
        }
        .select2-results__options li {
            font-size: 14px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
    </style>
@endsection