@extends('layouts.backend')

@section('main')
    <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-dark fw-bold fs-3 flex-column justify-content-center my-0">Objectve
                        Create</h1>
                    <!--end::Title-->
                    <!--begin::Breadcrumb-->
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin.dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Objectve</li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">Objectve Create</li>
                        <!--end::Item-->
                    </ul>
                    <!--end::Breadcrumb-->
                </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::Card-->
                <div class="card">
                    <!--begin::Card body-->
                    <div class="card-body py-4">

                        <form action="{{ route('project.objective.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <h1>Objective Information :-</h1>
                            <div class="mb-3">
                                <label for="title" class="form-label">Title</label>
                                <input type="text" name="title" id="title"
                                    class="form-control @error('title') is-invalid @enderror"
                                    value="{{ $data->title ?? '' }}" required placeholder="Enter title">
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="description" class="form-label"> Description</label>
                                <textarea name="description" id="description" cols="30" rows="3" class="form-control"
                                    placeholder="Enter Short Description">{{ $data->description ?? '' }}</textarea>

                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="btn_text_one" class="form-label">Button Text</label>
                                <input type="text" name="btn_text_one" id="btn_text_one"
                                    class="form-control @error('btn_text_one') is-invalid @enderror"
                                    value="{{ $data->button_text ?? '' }}" required placeholder="Button Text">
                                @error('btn_text_one')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="btn_url_one" class="form-label">Button URL</label>
                                <input type="text" name="btn_url_one" id="btn_url_one"
                                    class="form-control @error('btn_url_one') is-invalid @enderror"
                                    value="{{ $data->button_url ?? '' }}" required placeholder="Button URL">
                                @error('btn_url_one')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <h2 class=" my-3">Cabin-Details :-</h2>

                            @if ($objectiveDetails->count() > 0)
                                @foreach ($objectiveDetails as $index => $info)
                                    <div class="row" id="row-{{ $index }}">
                                        <div class="col-md-6 mb-3">
                                            <label for="details_title" class="form-label">Title</label>
                                            <input type="text" name="details_title[]" id="details_title"
                                                class="form-control @error('details_title') is-invalid @enderror"
                                                value="{{ $info->title }}">
                                            @error('details_title')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div class="col-md-5 mb-3">
                                            <div class="d-flex justify-content-between">
                                                <div>
                                                    <label for="details_image" class="form-label">Image</label>
                                                    <input type="file" name="details_image[]" id="details_image"
                                                        class="form-control @error('details_image') is-invalid @enderror">
                                                </div>
                                                <img src="{{ asset('uploads/objectives/' . $info->image) }}"
                                                    alt="" style="width: 200px">
                                            </div>
                                            <input type="hidden" name="old_details_image[]" value="{{ $info->image }}">

                                            @error('details_image')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        @if ($index > 0)
                                            <div class="col-md-1 mb-1">
                                                <button type="button" class="remove btn btn-sm btn-danger text-center ml-2"
                                                    style="margin-top:32px" onclick="removeRow({{ $index }})">
                                                    <i class="fa fa-minus"></i>
                                                </button>
                                            </div>
                                        @else
                                            <div class="col-md-1 mb-3 d-flex justify-content-center align-items-center">

                                                <button type="button" class="btn btn-sm btn-success"
                                                    style="margin-top: 22px;" onclick="addField()"><i
                                                        class="fa-solid fa-plus"></i></button>
                                            </div>
                                        @endif

                                    </div>
                                @endforeach
                                <div id="wrapper"></div>
                            @else
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="details_title" class="form-label">Title</label>
                                        <input type="text" name="details_title[]" id="details_title"
                                            class="form-control @error('details_title') is-invalid @enderror">
                                        @error('details_title')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-5 mb-3">
                                        <label for="details_image" class="form-label">Image</label>
                                        <input type="file" name="details_image[]" id="details_image"
                                            class="form-control @error('details_image') is-invalid @enderror">
                                        @error('details_image')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-1 mb-3 d-flex justify-content-center align-items-center">

                                        <button type="button" class="btn btn-sm btn-success" style="margin-top: 22px;"
                                            onclick="addField()"><i class="fa-solid fa-plus"></i></button>
                                    </div>
                                </div>

                                <div id="wrapper"></div>
                            @endif





                            <div class="text-end">
                                <a href="#" class="btn btn-secondary">Cancel</a>
                                <button type="submit" class="btn btn-success">Create</button>
                            </div>
                        </form>


                    </div>
                    <!--end::Card body-->
                </div>
                <!--end::Card-->
            </div>
            <!--end::Content container-->
        </div>
        <!--end::Content-->
    </div>
    <script>
        var i = {{ count($objectiveDetails) }};

        function addField() {
            i++;
            $("#wrapper").append(`
            <div class="row form-group" id="row-${i}">
            <div class="col-md-6 mb-3">
                                    <label for="details_title" class="form-label">Title</label>
                                    <input type="text" name="details_title[]" id="details_title"
                                        class="form-control @error('details_title') is-invalid @enderror" >
                                    @error('details_title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-5 mb-3">
                                    <label for="details_image" class="form-label">Image</label>
                                    <input type="file" name="details_image[]" id="details_image"
                                        class="form-control @error('details_image') is-invalid @enderror" >
                                    @error('details_image')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                <div class="col-md-1 mb-1">
                    <button type="button" class="remove btn btn-sm btn-danger text-center ml-2" style="margin-top:32px" onclick="removeRow(${i})">
                        <i class="fa fa-minus"></i>
                    </button>
                </div>
            </div>
        `);
        }

        function removeRow(rowId) {
            $(`#row-${rowId}`).remove();
        }
    </script>
@endsection