@extends('layouts.app')

@section('title', isset($service) ? 'Modifier un Service' : 'Ajouter un Service')

@section('content')
<div class="d-flex flex-column flex-column-fluid">

    <!--begin::Toolbar-->
    <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
        <!--begin::Toolbar container-->
        <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
            <!--begin::Page title-->
            <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                <!--begin::Title-->
                <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
                    {{ isset($service) ? 'Modifier un Service' : 'Ajouter un Service' }}
                </h1>
                <!--end::Title-->
            </div>
            <!--end::Page title-->
        </div>
        <!--end::Toolbar container-->
    </div>
    <!--end::Toolbar-->

    <!--begin::Content-->
    <div id="kt_app_content" class="app-content flex-column-fluid">
        <!--begin::Content container-->
        <div id="kt_app_content_container" class="app-container container-xxl">
            <!--begin::Basic info-->
            <form method="POST" action="{{ isset($service) ? route('services.update', $service->id) : route('services.store') }}" class="form fv-plugins-bootstrap5 fv-plugins-framework" enctype="multipart/form-data">
                @csrf
                @if(isset($service))
                @method('PUT')
                @endif

                <div class="card mb-5 mb-xl-10">
                    <!--begin::Content-->
                    <div id="kt_account_settings_profile_details" class="collapse show">
                        <!--begin::Form-->
                        <!--begin::Card header-->
                        <div class="card-header">
                            <!--begin::Card title-->
                            <div class="card-title">
                                <h2>Informations sur le Service</h2>
                            </div>
                            <!--end::Card title-->
                        </div>
                        <!--end::Card header-->

                        <!--begin::Card body-->
                        <div class="card-body border-top p-9">

                            <!--begin::Input group main_title-->
                            <div class="row mb-6">
                                <label for="main_title" class="col-lg-4 col-form-label required fw-semibold fs-6">Main Title</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" id="main_title" name="main_title" class="form-control form-control-lg form-control-solid" placeholder="Main Title" value="{{ old('main_title', $service->main_title ?? 'Lorem Ipsum Main Title') }}" required>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group main_title-->
                            <!--begin::Input group slug-->
                            <div class="row mb-6">
                                <label for="slug" class="col-lg-4 col-form-label required fw-semibold fs-6">Slug</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" id="slug" name="slug" class="form-control form-control-lg form-control-solid" placeholder="Slug" value="{{ old('slug', $service->slug ?? 'site-web') }}" required>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group slug-->



                            <!--begin::Input group main_description-->
                            <div class="row mb-6">
                                <label for="main_description" class="col-lg-4 col-form-label required fw-semibold fs-6">Main Description</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <textarea id="main_description" name="main_description" class="form-control form-control-lg form-control-solid" required>{{ old('main_description', $service->main_description ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group main_description-->

                            <!--begin::Input group featured_image-->
                            <div class="row mb-6">
                                <label for="featured_image" class="col-lg-4 col-form-label required fw-semibold fs-6">Featured Image</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    @if(isset($service) && $service->featured_image)
                                    <div class="mb-3">
                                        <img src="{{ asset('storage/' . $service->featured_image) }}" alt="Featured Image" style="max-width: 100px; height: auto;">
                                    </div>
                                    @endif
                                    <input type="file" id="featured_image" name="featured_image" class="form-control form-control-lg form-control-solid">
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group featured_image-->

                            <!--begin::Input group client_slogan-->
                            <div class="row mb-6">
                                <label for="client_slogan" class="col-lg-4 col-form-label required fw-semibold fs-6">Client Slogan</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" id="client_slogan" name="client_slogan" class="form-control form-control-lg form-control-solid" placeholder="Client Slogan" value="{{ old('client_slogan', $service->client_slogan ?? 'Lorem Ipsum Slogan') }}" required>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group client_slogan-->

                            <!--begin::Input group features_title-->
                            <div class="row mb-6">
                                <label for="features_title" class="col-lg-4 col-form-label required fw-semibold fs-6">Features Title</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <input type="text" id="features_title" name="features_title" class="form-control form-control-lg form-control-solid" placeholder="Features Title" value="{{ old('features_title', $service->features_title ?? 'Lorem Ipsum Features Title') }}" required>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group features_title-->

                            <!--begin::Input group features_description-->
                            <div class="row mb-6">
                                <label for="features_description" class="col-lg-4 col-form-label required fw-semibold fs-6">Features Description</label>
                                <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                    <textarea id="features_description" name="features_description" class="form-control form-control-lg form-control-solid" required>{{ old('features_description', $service->features_description ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                    <div class="fv-plugins-message-container invalid-feedback"></div>
                                </div>
                            </div>
                            <!--end::Input group features_description-->

                            @for($i = 1; $i <= 6; $i++) <!--begin::Input group argument{{ $i }}-->
                                <div class="row mb-6">
                                    <label for="argument{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Argument {{ $i }}</label>
                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                        <input type="text" id="argument{{ $i }}" name="argument{{ $i }}" class="form-control form-control-lg form-control-solid" placeholder="Argument {{ $i }}" value="{{ old('argument' . $i, $service->{'argument' . $i} ?? 'Lorem Ipsum Argument ' . $i) }}" required>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                                <!--end::Input group argument{{ $i }}-->

                                <!--begin::Input group argument_icon{{ $i }}-->
                                <div class="row mb-6">
                                    <label for="argument_icon{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Argument Icon {{ $i }}</label>
                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                        <input type="text" id="argument_icon{{ $i }}" name="argument_icon{{ $i }}" class="form-control form-control-lg form-control-solid" placeholder="Argument Icon {{ $i }}" value="{{ old('argument_icon' . $i, $service->{'argument_icon' . $i} ?? 'icon-placeholder') }}" required>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                                <!--end::Input group argument_icon{{ $i }}-->

                                <!--begin::Input group argument_description{{ $i }}-->
                                <div class="row mb-6">
                                    <label for="argument_description{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Argument Description {{ $i }}</label>
                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                        <textarea id="argument_description{{ $i }}" name="argument_description{{ $i }}" class="form-control form-control-lg form-control-solid" required>{{ old('argument_description' . $i, $service->{'argument_description' . $i} ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                                <!--end::Input group argument_description{{ $i }}-->
                                @endfor

                                <!--begin::Input group steps_title-->
                                <div class="row mb-6">
                                    <label for="steps_title" class="col-lg-4 col-form-label required fw-semibold fs-6">Steps Title</label>
                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                        <input type="text" id="steps_title" name="steps_title" class="form-control form-control-lg form-control-solid" placeholder="Steps Title" value="{{ old('steps_title', $service->steps_title ?? 'Lorem Ipsum Steps Title') }}" required>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                                <!--end::Input group steps_title-->

                                <!--begin::Input group steps_description-->
                                <div class="row mb-6">
                                    <label for="steps_description" class="col-lg-4 col-form-label required fw-semibold fs-6">Steps Description</label>
                                    <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                        <textarea id="steps_description" name="steps_description" class="form-control form-control-lg form-control-solid" required>{{ old('steps_description', $service->steps_description ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                        <div class="fv-plugins-message-container invalid-feedback"></div>
                                    </div>
                                </div>
                                <!--end::Input group steps_description-->

                                @for($i = 1; $i <= 3; $i++) <!--begin::Input group step_title{{ $i }}-->
                                    <div class="row mb-6">
                                        <label for="step_title{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Step Title {{ $i }}</label>
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="text" id="step_title{{ $i }}" name="step_title{{ $i }}" class="form-control form-control-lg form-control-solid" placeholder="Step Title {{ $i }}" value="{{ old('step_title' . $i, $service->{'step_title' . $i} ?? 'Lorem Ipsum Step Title ' . $i) }}" required>
                                            <div class="fv-plugins-message-container invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <!--end::Input group step_title{{ $i }}-->

                                    <!--begin::Input group step_description{{ $i }}-->
                                    <div class="row mb-6">
                                        <label for="step_description{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Step Description {{ $i }}</label>
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <textarea id="step_description{{ $i }}" name="step_description{{ $i }}" class="form-control form-control-lg form-control-solid" required>{{ old('step_description' . $i, $service->{'step_description' . $i} ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                            <div class="fv-plugins-message-container invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <!--end::Input group step_description{{ $i }}-->

                                    <!--begin::Input group step_image{{ $i }}-->
                                    <div class="row mb-6">
                                        <label for="step_image{{ $i }}" class="col-lg-4 col-form-label required fw-semibold fs-6">Step Image {{ $i }}</label>
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            @if(isset($service) && isset($service->{'step_image' . $i}))
                                            <div class="mb-3">
                                                <img src="{{ asset('storage/' . $service->{'step_image' . $i}) }}" alt="Step Image {{ $i }}" style="max-width: 100px; height: auto;">
                                            </div>
                                            @endif
                                            <input type="file" id="step_image{{ $i }}" name="step_image{{ $i }}" class="form-control form-control-lg form-control-solid">
                                            <div class="fv-plugins-message-container invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <!--end::Input group step_image{{ $i }}-->
                                    @endfor

                                    <!--begin::Input group faq_title-->
                                    <div class="row mb-6">
                                        <label for="faq_title" class="col-lg-4 col-form-label required fw-semibold fs-6">FAQ Title</label>
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <input type="text" id="faq_title" name="faq_title" class="form-control form-control-lg form-control-solid" placeholder="FAQ Title" value="{{ old('faq_title', $service->faq_title ?? 'Lorem Ipsum FAQ Title') }}" required>
                                            <div class="fv-plugins-message-container invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <!--end::Input group faq_title-->

                                    <!--begin::Input group faq_description-->
                                    <div class="row mb-6">
                                        <label for="faq_description" class="col-lg-4 col-form-label required fw-semibold fs-6">FAQ Description</label>
                                        <div class="col-lg-8 fv-row fv-plugins-icon-container">
                                            <textarea id="faq_description" name="faq_description" class="form-control form-control-lg form-control-solid" required>{{ old('faq_description', $service->faq_description ?? 'Lorem ipsum dolor sit amet consectetur adipiscing elit.') }}</textarea>
                                            <div class="fv-plugins-message-container invalid-feedback"></div>
                                        </div>
                                    </div>
                                    <!--end::Input group faq_description-->

                                    <!--begin::Submit button-->
                                    <div class="d-flex justify-content-end">
                                        <a href="{{ route('services.index') }}" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">Retour</a>
                                        <button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
                                            <span class="indicator-label">{{ isset($service) ? 'Update' : 'Create' }}</span>
                                            <span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                        </button>
                                    </div>
                                    <!--end::Submit button-->
                        </div>
                        <!--end::Card body-->
                        <!--end::Form-->
                    </div>
                    <!--end::Content-->
                </div>
            </form>
            <!--end::Basic info-->
        </div>
        <!--end::Content container-->

        @if(isset($service))
        <hr>
        <div class="card mb-5 mb-xl-10">
            <div class="card-header">
                <div class="card-title">
                    <h2>FAQ</h2>
                </div>
                <div class="d-flex justify-content-end">
                    <a href="{{ route('services.faqs.create', $service->id) }}" class="btn btn-success mb-3">Ajouter un FAQ</a>
                </div>
            </div>
            <div class="card-body border-top p-9">
                @if($service->faqs->isNotEmpty())
                <ul class="list-group">
                    @foreach($service->faqs as $faq)
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <h5>{{ $faq->question }} </h5>
                            <p>{{ $faq->answer }}</p>
                        </div>
                        <span class="d-flex">
                            <a href="{{ route('services.faqs.edit', [$service->id, $faq->id]) }}" class="btn btn-warning btn-sm me-2">Modifier</a>
                            <form action="{{ route('services.faqs.destroy', [$service->id, $faq->id]) }}" method="POST" style="display:inline-block;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Supprimer</button>
                            </form>
                        </span>
                    </li>
                    @endforeach
                </ul>
                @else
                <p>Aucun FAQ pour ce service.</p>
                @endif
            </div>

        </div>
        @endif
    </div>
    <!--end::Content-->
</div>
@include('services.script')

@endsection