@extends('admin.layouts.app')
@include('admin.nav')
@section('main')
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb-main">
                    <h4 class="text-capitalize breadcrumb-title">Add Service</h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="card card-Vertical card-default card-md mb-4">
                    <div class="card-body pb-md-30" style="padding: 0;">
                        <div class="Vertical-form">
                            <form action="{{ isset($due) ? route('service-update', $due) : route('service-store') }}"
                                method="post" enctype="multipart/form-data">
                                @csrf
                                @isset($service)
                                    @method('PUT')
                                @endisset
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" required name="title"
                                                value="{{ old('title', @$service->title) }}" @class([
                                                    'error' => $errors->has('title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])
                                                placeholder="Enter Title">
                                            @error('title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Subtitle</label>
                                            <input type="text" name="subtitle"
                                                value="{{ old('title', @$service->title) }}" @class([
                                                    'error' => $errors->has('subtitle'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])
                                                placeholder="Enter Subtitle">
                                            @error('subtitle')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Short Description</label>
                                            <input type="text" name="short_desc" @class([
                                                'error' => $errors->has('short_desc'),
                                                'form-control ih-medium ip-gray radius-xs b-light px-15',
                                            ])
                                                value="{{ old('short_desc', @$service->short_desc) }}"
                                                placeholder="Enter Short Description" />
                                            @error('short_desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <div class="form-group formElement-editor mb-0">
                                                <textarea name="long_desc" @class([
                                                    'error' => $errors->has('long_desc'),
                                                    'form-control-lg editor',
                                                ]) placeholder="Type your message...">{{ old('long_desc', @$service->long_desc) }}</textarea>
                                                @error('long_desc')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Add Advantages </h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input name="adv_title" type="text"
                                                value="{{ old('adv_title', @$service->adv_title) }}"
                                                @class([
                                                    'error' => $errors->has('adv_title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Title">
                                            @error('adv_title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input name="adv_desc" type="text"
                                                value="{{ old('adv_desc', @$service->adv_desc) }}"
                                                @class([
                                                    'error' => $errors->has('adv_desc'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Description">
                                            @error('adv_desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Advantages Information </h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Icon Images</label>
                                            <div class="atbd-tag-wrap">

                                                <div class="atbd-upload">
                                                    <div class="atbd-upload__button">
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-lg btn-outline-lighten btn-upload"
                                                            onclick="$('#upload-1').click()"> <span
                                                                data-feather="upload"></span> Click to Upload</a>
                                                        <input type="file" name="upload-1" class="upload-one"
                                                            id="upload-1">
                                                    </div>
                                                    <div class="atbd-upload__file">
                                                        <ul>

                                                        </ul>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" placeholder="Enter Title">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input type="text" placeholder="Enter  Description">
                                        </div>
                                    </div>


                                    <div class="col-md-12">
                                        <div class="layout-button mt-15 add_more_btn">

                                            <button type="button" id="showButton"
                                                class="btn btn-primary btn-default btn-squared px-20">Add More</button>
                                        </div>
                                        <br>

                                    </div>
                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Add Process </h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" name="process_title"
                                                value="{{ old('process_title', @$service->process_title) }}"
                                                @class([
                                                    'error' => $errors->has('process_title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Title">
                                            @error('process_title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input type="text" name="process_desc"
                                                value="{{ old('process_desc', @$service->process_desc) }}"
                                                @class([
                                                    'error' => $errors->has('process_desc'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Description">
                                            @error('process_desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>


                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Process Information</h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Icon Images</label>
                                            <div class="atbd-tag-wrap">

                                                <div class="atbd-upload">
                                                    <div class="atbd-upload__button">
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-lg btn-outline-lighten btn-upload"
                                                            onclick="$('#upload-1').click()"> <span
                                                                data-feather="upload"></span> Click to Upload</a>
                                                        <input type="file" name="upload-1" class="upload-one"
                                                            id="upload-1">
                                                    </div>
                                                    <div class="atbd-upload__file">
                                                        <ul>

                                                        </ul>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" placeholder="Enter Title">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input type="text" value="{{ old('title', @$service->title) }}"
                                                @class([
                                                    'error' => $errors->has('title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter  Description">
                                        </div>
                                    </div>


                                    <!-- Add More Button -->
                                    <div class="col-md-12">
                                        <div class="layout-button mt-15 add_more_btn">

                                            <button type="button" onclick="addFields1()"
                                                class="btn btn-primary btn-default btn-squared px-20">Add More</button>
                                        </div>

                                        <br>
                                        <br>
                                    </div>
                                    <!-- Add More Button -->

                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Add Documents</h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" name="docs_title"
                                                value="{{ old('docs_title', @$service->docs_title) }}"
                                                @class([
                                                    'error' => $errors->has('docs_title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Title">
                                            @error('docs_title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input type="text" value="{{ old('docs_desc', @$service->docs_desc) }}"
                                                @class([
                                                    'error' => $errors->has('docs_desc'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Description">
                                            @error('docs_desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-lg-12" bis_skin_checked="1">
                                        <div class="breadcrumb-main" bis_skin_checked="1">
                                            <h4 class="text-capitalize breadcrumb-title">Documents Information</h4>
                                            <div class="div-line"></div>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Icon Images</label>
                                            <div class="atbd-tag-wrap">

                                                <div class="atbd-upload">
                                                    <div class="atbd-upload__button">
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-lg btn-outline-lighten btn-upload"
                                                            onclick="$('#upload_1').click()"> <span
                                                                data-feather="upload"></span> Click to Upload</a>
                                                        <input type="file" name="upload_1" class="upload-one"
                                                            id="upload_11">
                                                    </div>
                                                    <div class="atbd-upload__file">
                                                        <ul>

                                                        </ul>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Title</label>
                                            <input type="text" placeholder="Enter Title">
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Description</label>
                                            <input type="text" placeholder="Enter  Description">
                                        </div>
                                    </div>

                                    <div class="row" id="fieldContainer"></div>

                                    <!-- Add More Button -->
                                    <div class="col-md-12">
                                        <div class="layout-button mt-15 add_more_btn">
                                            <button type="button" onclick="addFields()"
                                                class="btn btn-primary btn-default btn-squared px-20">Add More</button>
                                        </div>

                                        <br>
                                        <br>
                                    </div>
                                    <!-- Add More Button -->

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Overview</label>
                                            <div class="form-group formElement-editor mb-0">
                                                <textarea name="overview" @class([
                                                    'error' => $errors->has('docs_desc'),
                                                    'form-control-lg editor',
                                                ]) placeholder="Overview...">{{ old('overview', @$service->overview) }}</textarea>
                                                @error('overview')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Procedure for
                                                Registration</label>
                                            <div class="form-group formElement-editor mb-0">
                                                <textarea name="procedure" @class([
                                                    'error' => $errors->has('procedure'),
                                                    'form-control-lg editor',
                                                ]) placeholder="Procedure for Registration...">{{ old('overview', @$service->procedure) }}</textarea>
                                                @error('procedure')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Category</label>
                                            <select name="service_category_id" class="form-control ">
                                                <option>Select Category</option>
                                                @foreach ($categories as $cat)
                                                    <option
                                                        {{ old('service_category_id', @$service->service_category_id) == $cat->id ? 'selected' : '' }}
                                                        value="{{ $cat->id }}">{{ $cat->name }}</option>
                                                @endforeach
                                            </select>
                                            @error('service_category_id')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Date</label>
                                            <input type="date" name="date"
                                                value="{{ old('date', @$service->date) }}" @class([
                                                    'error' => $errors->has('date'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])
                                                placeholder="">
                                            @error('date')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Sort Order</label>
                                            <input type="text" name="sort"
                                                value="{{ old('sort', @$service->sort) }}" @class([
                                                    'error' => $errors->has('sort'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ])
                                                placeholder="0">
                                            @error('sort')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Meta Title</label>
                                            <input type="text" name="meta_title"
                                                value="{{ old('meta_title', @$service->meta_title) }}"
                                                @class([
                                                    'error' => $errors->has('meta_title'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Meta Title">
                                            @error('meta_title')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Meta Keyword</label>
                                            <input type="text" name="meta_desc"
                                                value="{{ old('meta_desc', @$service->meta_desc) }}"
                                                @class([
                                                    'error' => $errors->has('meta_desc'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Meta Keyword">
                                            @error('meta_desc')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Meta Description</label>
                                            <input type="text" name="meta_keywords"
                                                value="{{ old('meta_keywords', @$service->meta_keywords) }}"
                                                @class([
                                                    'error' => $errors->has('meta_keywords'),
                                                    'form-control ih-medium ip-gray radius-xs b-light px-15',
                                                ]) placeholder="Enter Meta Description">
                                            @error('meta_keywords')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="color-dark fs-14 fw-500 align-center">Service Images</label>
                                            <div class="atbd-tag-wrap">

                                                <div class="atbd-upload">
                                                    <div class="atbd-upload__button">
                                                        <a href="javascript:void(0)"
                                                            class="btn btn-lg btn-outline-lighten btn-upload"
                                                            onclick="$('#upload-1').click()"> <span
                                                                data-feather="upload"></span> Click to Upload</a>
                                                        <input type="file" name="images[]" class="upload-one"
                                                            id="upload-1">
                                                    </div>
                                                    <div class="atbd-upload__file">
                                                        <ul>

                                                        </ul>
                                                    </div>
                                                </div>
                                                @error('images')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                                @error('images.*')
                                                    <span class="error">{{ $message }}</span>
                                                @enderror
                                            </div>
                                        </div>

                                    </div>
                                    @if (isset($service))
                                        <div class="col-md-8 col-12">
                                            <div class="row">
                                                @foreach ($service->images as $image)
                                                    {{-- delete image on click event --}}
                                                    <div class="col-2">
                                                        <a href="javascript:void(0)"
                                                            onclick="handleDeleteImage(this,'{{ route('blog.deleteFeaturedImage', $image) }}')">
                                                            <span data-feather="x-circle"></span>
                                                        </a>
                                                        <img style="border: 1px solid lightgray" height="50"
                                                            width="50"
                                                            src="{{ asset('storage/blogs/' . $image->image) }}" />
                                                    </div>
                                                @endforeach
                                            </div>

                                        </div>
                                    @endif
                                    <div class="col-md-6">
                                        <div class="layout-button mt-15">

                                            <button type="submit"
                                                class="btn btn-primary btn-default btn-squared px-20">{{ isset($service) ? 'Update' : 'Save' }}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- ends: .card -->

            </div>
        </div>
    </div>
@endsection

@section('pageStyle')
    <style>
        .div-line {
            background: #efefef;
            height: 1px;
            width: 98%;
            margin: auto;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        a.btn.btn-lg.btn-outline-lighten.btn-upload {
            display: block;
            width: 100% !important;
        }

        div#fieldContainer {
            margin-left: 0px !important;
            width: 100% !important;
        }

        div#fieldContainer input {
            margin-bottom: 15px;
        }
    </style>
@endsection

@section('pageJs')
    <script src="{{ asset('admin/js/ckeditor.js') }}"></script>
    <script>
        CKEDITOR.replaceAll(document.querySelector('.editor'));

        function handleDeleteImage(thisObj, route) {
            const res = confirm(`Delete image?`)
            if (!res) return false;
            fetch(route, {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json, text-plain, */*',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                }).then(res => res.json())
                .then(data => {
                    //if status is ok   
                    if (data.status == 'ok') {
                        //remove the image from the dom
                        thisObj.parentElement.remove();
                        //show a success message
                        alert(data.message);
                    } else {
                        //show an error message
                        alert(data.message);
                    }
                })
                .catch(err => console.log(err))
        }
    </script>
@endsection