@extends('admin.layout.app')
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="page-inner element-1">

                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <div class="card-title">Website Setting</div>
                            </div>
                            <form action="{{ route('stor_quote_setting') }}" method="post" enctype="multipart/form-data"
                                name="update_setting_page" id="update_setting_page">
                                @csrf
                                <input type="hidden" name="id" value="">
                                <div class="card-body element-2">
                                    <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="title" class="text-white">Title <span style="color:red;">*</span></label>
                                        <input type="text" class="form-control" name="title" id="title" value="{{ $settings->title ?? '' }}" placeholder="Enter title" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="short_description" class="text-white">Short Description <span style="color:red;">*</span></label>
                                        <textarea class="form-control" name="short_description" id="short_description" rows="3" placeholder="Enter short description" required>{{ $settings->short_description ?? '' }}</textarea>
                                        </div>
                                    </div>

                                    {{-- <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="phone" class="text-white">Phone <span style="color:red;">*</span></label>
                                        <input type="text" class="form-control" name="phone" id="phone" placeholder="Enter phone number" required>
                                        </div>
                                    </div> --}}

                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="about_title" class="text-white">About Title <span style="color:red;">*</span></label>
                                        <input type="text" class="form-control" name="about_title" value="{{ $settings->about_title ?? '' }}" id="about_title" placeholder="Enter about title" required>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                        <label for="about_sub_title" class="text-white">About Sub Title <span style="color:red;">*</span></label>
                                        <input type="text" class="form-control" value="{{ $settings->about_sub_title ?? '' }}" name="about_sub_title" id="about_sub_title" placeholder="Enter about sub title" required>
                                        </div>
                                    </div>

                                        <div class="row col-md-12">
                                            <div class="col-lg-12">
                                                <div class="form-group">
                                                    <label class="col-form-label mt-3">Feature <span class="text-danger">*</span></label>
                                                    <div id="dynamic-field-wrapperAJS">
                                                        @php
                                                            $details = $settings ? json_decode($settings->details, true) : [];
                                                        @endphp

                                                        @if (!empty($details))
                                                            @foreach ($details as $key => $val)
                                                                <div class="dynamic-aboutsJs row mb-2">
                                                                    <div class="col-md-11">
                                                                        <input type="text" class="form-control" name="features[]"
                                                                            placeholder="Enter Title"
                                                                            value="{{ $val['title'] ?? $val }}" required>
                                                                        </div>

                                                                    <div class="col-md-1 d-flex align-items-end">
                                                                        @if ($key != 0)
                                                                            <button type="button" class="btn btn-danger remove-buttonAJS">Remove</button>
                                                                        @endif
                                                                    </div>

                                                                </div>
                                                            @endforeach

                                                        @else
                                                            <div class="dynamic-aboutsJs row mb-2">
                                                                <div class="col-md-11">
                                                                    <input type="text" class="form-control" name="features[]"
                                                                            placeholder="Enter features" required>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    </div>
                                                    <button type="button" style="float: right;" class="btn btn-success add-buttonAJS">Add</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-action element-2 text-center">
                                    <a href="{{ url('admin/quotes-setting') }}"
                                        class="btn btn-light mr-2 btn-size-cus">Cancel</a>
                                    <button type="submit" name="Submit" id="loderButton"
                                        class="btn btn-primary px-5 rounded-0 btn-size-cus"><i
                                            class="fa fa-spinner fa-pulse fa-fw" id="loderIcon"
                                            style="display:none;"></i>Update</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection

    @section('js')
        <script type="text/javascript">
            // add modal
            $(document).on('submit', 'form#update_setting_page', function(e) {
                e.preventDefault();
                var data = new FormData(this);
                $('#loderIcon').show();
                $('#loderButton').prop("disabled", true);

                $.ajax({
                    cache: false,
                    contentType: false,
                    processData: false,
                    url: $(this).attr("action"),
                    method: $(this).attr("method"),
                    dataType: "json",
                    data: data,
                    success: function(response) {
                        $('#loderIcon').hide();
                        $('#loderButton').prop("disabled", false);

                        if (response.responseCode == 200) {
                            toastr.success(response.responseMessage);
                            $('div.add_model').modal('hide');
                            location.reload();
                        } else {
                            toastr.error(response.responseMessage);
                        }
                    }
                });
            });
        </script>
    @endsection