@extends('layout.master')

@push('plugin-styles')
    <link href="{{ asset('assets/plugins/select2/select2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
    <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@push('style')
    <style>
        .error {
            color: #F00;
            background-color: #FFF;
        }
    </style>
@endpush

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Solutions</a></li>
            <li class="breadcrumb-item active" aria-current="page">Section</li>
            <li class="breadcrumb-item active" aria-current="page">
                @isset($content)
                    Edit
                @else
                    Create
                @endisset Solutions Section
            </li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-lg-12">
            <div class="d-flex justify-content-center">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">
                                @isset($content)
                                    Edit
                                @else
                                    Create
                                @endisset Solutions Section
                            </h4>
                            @isset($content)
                                <form method="post" action="/admin/service-category/contents/{{ $content->id }}"
                                    id="PostForm" enctype="multipart/form-data">
                                    @method('PUT')
                                @else
                                    <form method="post" action="/admin/service-category/contents" id="PostForm"
                                        enctype="multipart/form-data">
                                    @endisset
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Name</label>
                                                    <input class="form-control" name="name" id="name"
                                                        placeholder="Solutions Section Name"
                                                        value="@isset($content){{ $content->name }}@endisset"
                                                        type="text">
                                                </div>
                                            </div>

                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Display Order</label>
                                                    <input class="form-control" required name="display_order" id="display_order"
                                                        placeholder="Solutions Section Display Order"
                                                        value="@isset($content){{ $content->display_order }}@endisset"
                                                        type="number">
                                                </div>
                                            </div>

                                            <div class="col-lg-4">
                                                <div class="mb-3">
                                                    <label for="name" class="form-label">Section Type
                                                    </label>
                                                    <select class="form-control js-example-basic-single" name="type"
                                                        id="type">
                                                        <option></option>
                                                        <option value="1"
                                                            @isset($content) @if ($content->type == 1) selected @endif @endisset>
                                                            Main Section
                                                        </option>
                                                        <option value="2"
                                                            @isset($content) @if ($content->type == 2) selected @endif @endisset>
                                                            Secondary Section
                                                        </option>
                                                        <option value="3"
                                                            @isset($content) @if ($content->type == 3) selected @endif @endisset>
                                                            Product Section
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row" id="contents">
                                        @isset($content)
                                            @if ($content->type == 1)
                                                <div class="col-lg-12 contentCard">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            Main Section
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="name" class="form-label">Section
                                                                        Title</label>
                                                                    <input class="form-control" name="section_title"
                                                                        placeholder=" Title"
                                                                        value="{{ $content->mainSection->title }}"
                                                                        type="text">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="name" class="form-label">Section
                                                                        Description</label>
                                                                    <textarea class="form-control" name="section_desc" placeholder=" Description">{{ $content->mainSection->description }}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="row">
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Section
                                                                            Image</label>
                                                                        <input class="form-control" name="section_image"
                                                                            type="file" id="formFile">
                                                                    </div>
                                                                    @if ($content->mainSection->hasMedia('service_category_section_image'))
                                                                        <div class="col-lg-3">
                                                                            <div class="mb-3">
                                                                                <br>
                                                                                <label class="form-label"
                                                                                    for="formFile">Previous
                                                                                    Image</label>
                                                                                <img class="img-fluid"
                                                                                    src="{{ $content->mainSection->getFirstMediaUrl('service_category_section_image') }}"
                                                                                    alt="icon" width="40px"
                                                                                    height="40px;">
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Section
                                                                            Brand Logo</label>
                                                                        <input class="form-control" name="section_logo_image"
                                                                            type="file" id="formFile">
                                                                    </div>
                                                                    @if ($content->mainSection->hasMedia('service_category_brand_logo'))
                                                                        <div class="col-lg-3">
                                                                            <div class="mb-3">
                                                                                <br>
                                                                                <label class="form-label"
                                                                                    for="formFile">Previous
                                                                                    Image</label>
                                                                                <img class="img-fluid"
                                                                                    src="{{ $content->mainSection->getFirstMediaUrl('service_category_brand_logo') }}"
                                                                                    alt="icon" width="40px"
                                                                                    height="40px;">
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                            <div class="row">
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                            Type</label>
                                                                        <select class="form-control" name="contact_type">
                                                                            <option value="contact"
                                                                                {{ isset($content) ? ($content->mainSection->contact_type == 'contact' ? 'selected' : '') : '' }}>
                                                                                Contact Us</option>
                                                                            <option value="visit"
                                                                                {{ isset($content) ? ($content->mainSection->contact_type == 'visit' ? 'selected' : '') : '' }}>
                                                                                Visit Url</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">
                                                                            Button Text</label>
                                                                            <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_button_text"
                                                                            value="{{ $content->mainSection->button_text }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                        </label>
                                                                        <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_value"
                                                                            value="{{ $content->mainSection->contact_value }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @elseif ($content->type == 2)
                                                <div class="col-lg-12 contentCard">
                                                    <div class="card">
                                                        <div class="card-header">
                                                            Secondary Section
                                                        </div>
                                                        <div class="card-body">
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="name" class="form-label">Section
                                                                        Title</label>
                                                                    <input class="form-control" name="section_title"
                                                                        placeholder=" Title"
                                                                        value="{{ $content->secondarySection->title }}"
                                                                        type="text">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label for="name" class="form-label">Section
                                                                        Description</label>
                                                                    <textarea class="form-control" name="section_desc" placeholder=" Description" value="">{{ $content->secondarySection->description }}</textarea>
                                                                </div>
                                                            </div>

                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Section
                                                                        Image</label>
                                                                    <input class="form-control" name="section_image"
                                                                        type="file" id="formFile">
                                                                </div>
                                                                @if ($content->secondarySection->hasMedia('service_category_section_image'))
                                                                    <div class="col-lg-3">
                                                                        <div class="mb-3">
                                                                            <br>
                                                                            <label class="form-label" for="formFile">Previous
                                                                                Image</label>
                                                                            <img class="img-fluid"
                                                                                src="{{ $content->secondarySection->getFirstMediaUrl('service_category_section_image') }}"
                                                                                alt="icon" width="40px" height="40px;">
                                                                        </div>
                                                                    </div>
                                                                @endif
                                                            </div>

                                                            <div class="row">
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                            Type</label>
                                                                        <select class="form-control" name="contact_type">
                                                                            <option value="contact"
                                                                                {{ isset($content) ? ($content->secondarySection->contact_type == 'contact' ? 'selected' : '') : '' }}>
                                                                                Contact Us</option>
                                                                            <option value="visit"
                                                                                {{ isset($content) ? ($content->secondarySection->contact_type == 'visit' ? 'selected' : '') : '' }}>
                                                                                Visit Url</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">
                                                                            Button Text</label>
                                                                            <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_button_text"
                                                                            value="{{ $content->secondarySection->button_text }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Contact
                                                                        </label>
                                                                        <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_value"
                                                                            value="{{ $content->secondarySection->contact_value }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @elseif ($content->type == 3)
                                                <div class="row">
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Product Title</label>
                                                            <input class="form-control" name="product_title"
                                                                id="product_title" placeholder="Product Title"
                                                                value="{{ $content->title }}" type="text">
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-4">
                                                        <div class="mb-3">
                                                            <label for="name" class="form-label">Product Short
                                                                Description</label>
                                                            <input class="form-control" name="product_short_desc"
                                                                id="product_title" placeholder="Product Short Description"
                                                                value="{{ $content->short_description }}" type="text">
                                                        </div>
                                                    </div>
                                                </div>
                                                @foreach ($content->products as $product)
                                                    <div class="col-lg-4 benefitsCard">
                                                        <div class="card">
                                                            <div class="card-header">
                                                                Product <i style="float: right;" class="mdi mdi-plus"
                                                                    id="addBenefitCard"></i>
                                                            </div>
                                                            <div class="card-body">
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <input type="hidden" name="product_id[]"
                                                                            value="{{ $product->id }}">
                                                                        <label for="name" class="form-label">Product
                                                                            Name</label>
                                                                        <input class="form-control" name="product_name[]"
                                                                            placeholder="Product Name"
                                                                            value="{{ $product->name }}" type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label for="name" class="form-label">Product Link</label>
                                                                        <input class="form-control" name="product_link[]"
                                                                            placeholder="Product Link" value="{{ $product->product_link }}"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                                <div class="col-lg-12">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">Product
                                                                            Image</label>
                                                                        <input class="form-control" name="product_image[]"
                                                                            type="file" id="formFile">
                                                                    </div>
                                                                    @if ($product->hasMedia('service_category_product_image'))
                                                                        <div class="col-lg-3">
                                                                            <div class="mb-3">
                                                                                <br>
                                                                                <label class="form-label"
                                                                                    for="formFile">Previous
                                                                                    Image</label>
                                                                                <img class="img-fluid"
                                                                                    src="{{ $product->getFirstMediaUrl('service_category_product_image') }}"
                                                                                    alt="icon" width="40px"
                                                                                    height="40px;">
                                                                            </div>
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @endif
                                        @endisset
                                    </div>
                                    <br>
                                    <input class="btn btn-primary" type="submit" value="Submit">
                                </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('plugin-scripts')
    <script src="{{ asset('assets/plugins/select2/select2.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/jquery-validation/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
    <script>
        $(document).ready(function() {
            //creating slug for question
            let type = $("select[name='type']").val();
            $("select[name='type']").change(function() {
                let newType = $(this).val();
                if (newType == type) {
                    return;
                } else {
                    type = newType;
                    $("#contents").html("");
                    if (type == 1) {
                        var html = `<div class="col-lg-12 contentCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Main Section
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Title</label>
                                                                <input class="form-control" name="section_title"
                                                                    placeholder=" Title" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Description</label>
                                                                <textarea class="form-control" name="section_desc" placeholder=" Description" value=""></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Section
                                                                        Image</label>
                                                                    <input class="form-control" name="section_image"
                                                                        type="file" id="formFile">
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Section
                                                                        Brand Logo</label>
                                                                    <input class="form-control" name="section_logo_image"
                                                                        type="file" id="formFile">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-lg-4">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                        Type</label>
                                                                    <select class="form-control" name="contact_type">
                                                                        <option value="contact">Contact Us</option>
                                                                        <option value="visit">Visit Url</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">
                                                                            Button Text</label>
                                                                            <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_button_text"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                            <div class="col-lg-4">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                    </label>
                                                                    <input class="form-control"
                                                                        placeholder="use only for visit url"
                                                                        name="contact_value" type="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                    } else if (type == 2) {
                        var html = `<div class="col-lg-12 contentCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Secondary Section
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Title</label>
                                                                <input class="form-control" name="section_title"
                                                                    placeholder=" Title" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Section
                                                                    Description</label>
                                                                <textarea class="form-control" name="section_desc" placeholder=" Description" value=""></textarea>
                                                            </div>
                                                        </div>

                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Section
                                                                    Image</label>
                                                                <input class="form-control" name="section_image"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>

                                                        <div class="row">
                                                            <div class="col-lg-4">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                        Type</label>
                                                                    <select class="form-control" name="contact_type">
                                                                        <option value="contact">Contact Us</option>
                                                                        <option value="visit">Visit Url</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-4">
                                                                    <div class="mb-3">
                                                                        <label class="form-label" for="formFile">
                                                                            Button Text</label>
                                                                            <input class="form-control"
                                                                            placeholder="use only for visit url"
                                                                            name="contact_button_text"
                                                                            type="text">
                                                                    </div>
                                                                </div>
                                                            <div class="col-lg-4">
                                                                <div class="mb-3">
                                                                    <label class="form-label" for="formFile">Contact
                                                                    </label>
                                                                    <input class="form-control"
                                                                        placeholder="use only for visit url"
                                                                        name="contact_value" type="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                    } else if (type == 3) {
                        var html = `
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Product Title</label>
                                    <input class="form-control" name="product_title" id="product_title"
                                        placeholder="Product Title"
                                        value=""
                                        type="text">
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Product Short Description</label>
                                    <input class="form-control" name="product_short_desc" id="product_title"
                                        placeholder="Product Short Description"
                                        value=""
                                        type="text">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 benefitsCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Product <i style="float: right;"
                                                            class="mdi mdi-plus" id="addBenefitCard"></i>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Product Name</label>
                                                                <input class="form-control" name="product_name[]"
                                                                    placeholder="Product Name" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Product Link</label>
                                                                <input class="form-control" name="product_link[]"
                                                                    placeholder="Product Link" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Product Image</label>
                                                                <input class="form-control" name="product_image[]"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                    }

                    $("#contents").append(html);
                }
            });
            $(document).on('click', '#addBenefitCard', function() {
                var html = `<div class="col-lg-4 benefitsCard">
                                                <div class="card">
                                                    <div class="card-header">
                                                        Product <i style="float: right;"
                                                            class="mdi mdi-close-circle removeBenefitsCard"></i>
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Product Name</label>
                                                                <input class="form-control" name="product_name[]"
                                                                    placeholder="Product Name" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label for="name" class="form-label">Product Link</label>
                                                                <input class="form-control" name="product_link[]"
                                                                    placeholder="Product Link" value=""
                                                                    type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="mb-3">
                                                                <label class="form-label" for="formFile">Product Image</label>
                                                                <input class="form-control" name="product_image[]"
                                                                    type="file" id="formFile">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>`;
                $("#contents").append(html);
            });

            $(document).on('click', '.removeBenefitsCard', function() {
                $(this).closest('.benefitsCard').remove();
            });


            //select2
            if ($(".js-example-basic-single").length) {
                $(".js-example-basic-single").select2({
                    placeholder: "Choose a option",
                    allowClear: true,
                });
            }

            $("#PostForm").validate({
                ignore: [],
                rules: {
                    name: {
                        required: true,
                        minlength: 3
                    },
                    heading: {
                        required: true,
                    },
                    type: {
                        required: true,
                    },
                },
                submitHandler: function(form, e) {
                    e.preventDefault();
                    var method = $(form).attr('method');
                    var url = $(form).attr('action');
                    var formData = new FormData(form);
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: method,
                        url: url,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            if (result) {
                                @isset($content)
                                @else
                                    form.reset();
                                    $(".js-example-basic-single").val('').trigger('change');
                                @endisset
                                const Toast = Swal.mixin({
                                    toast: true,
                                    position: 'top-end',
                                    showConfirmButton: false,
                                    timer: 2000,
                                    timerProgressBar: true,
                                });

                                Toast.fire({
                                    icon: 'success',
                                    title: result.message,
                                })
                            }
                        },
                        error: function(data) {
                            const Toast = Swal.mixin({
                                toast: true,
                                position: 'top-end',
                                showConfirmButton: false,
                                timer: 2000,
                                timerProgressBar: true,
                            });

                            Toast.fire({
                                icon: 'error',
                                title: 'Something went wrong',
                            })

                            if (data.responseJSON['errors']) {

                                let err = data.responseJSON['errors'];

                                $.each(err, (i, j) => {
                                    $(`input[name=${i}]`).after(
                                        `<span class="text-danger">${j}</span>`);
                                });
                            }
                        }
                    });
                    return false;
                }
            });

        });
    </script>
@endpush