@extends('layout.master')
@section('content')
<!-- Main Content-->
<div class="main-content side-content pt-0">

    <div class="main-container container-fluid">
        <div class="inner-body">
            <!-- Page Header -->
            <div class="page-header">
                <div>
                    <h2 class="main-content-title tx-24 mg-b-5">{{ $section->heading }}</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Category Page / Add</li>
                    </ol>
                </div>
            </div>
        </div>



        <div class="row row-sm">
            <div class="col-lg-12">
                <div class="card custom-card overflow-hidden">
                    <div class="card-body">
                        <div class="container">
                            <!-- @if(session('message')) -->
                            <div class="alert alert-success">
                                <!-- {{ session('message') }}
                                @endif -->
                    <!-- End Page Header -->
                    @if (session('success'))
                                <div class="alert alert-success">
                                    {{ session('success') }}
                                </div>
                                @endif

                                @if (session('error'))
                                <div class="alert alert-danger">
                                    {{ session('error') }}
                                </div>
                                @endif
                                <form method="post" action="{{ route('category.store')  }}" enctype="multipart/form-data">
                                    @csrf
                                    

                                    <div class="row">

                                        <div class="col-md-12 col-sm-12 mt-2 mb-2">
                                            <div class=" font-weight-semibold mt-1 mb-3">Name</div>
                                            <input type="text" class="form-control" required name="name" placeholder="Enter Name">

                                        </div>
                                        
                                        <div class="form-group col-md-6">
                                            <div class="mb-3 font-weight-semibold">Image</div>
                                            <input type="File" class="form-control" name="image"
                                                placeholder="Enter Unit">
                                        </div>
                                       
                                        <div class="d-flex justify-content-end">
                                            <button class="btn btn-primary col-md-3" type="submit">Add</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
    function addField(event) {
        const template = document.querySelector('#dynamic-fields .template').cloneNode(true);
        template.classList.remove('template');
        const plusButton = template.querySelector('.fa-plus');
        if (plusButton) {
            plusButton.remove();
        }

        const minusButton = document.createElement('a');
        minusButton.className = 'fa fa-minus btn-save ms-2';
        minusButton.setAttribute('onclick', 'removeField(event)');
        template.querySelector('.col-md-4').appendChild(minusButton);

        document.getElementById('dynamic-fields').appendChild(template);
    }

    function removeField(event) {
        const fieldSet = event.target.closest('.row');
        const totalRows = document.querySelectorAll('#dynamic-fields .row').length;
        if (totalRows > 1) {
            fieldSet.remove();
        } else {
            alert("At least one set of fields is required.");
        }
    }


    function addImageField(event) {
        const template = document.querySelector('#image-fields .image-template').cloneNode(true);
        template.classList.remove('image-template');

        const plusButton = template.querySelector('.fa-plus');
        if (plusButton) {
            plusButton.remove();
        }

        const minusButton = document.createElement('a');
        minusButton.className = 'fa fa-minus btn-save col-md-3 d-flex align-items-center justify-content-center mt-4';
        minusButton.setAttribute('onclick', 'removeImageField(event)');
        template.querySelector('.col-md-4').appendChild(minusButton);

        const lastImageField = document.querySelector('#image-fields .image-row:last-of-type');
        if (lastImageField) {
            lastImageField.insertAdjacentElement('afterend', template);
        } else {
            document.getElementById('image-fields').appendChild(template);
        }
    }

    function removeImageField(event) {
        const fieldSet = event.target.closest('.row');
        const totalRows = document.querySelectorAll('#image-fields .image-row').length;
        if (totalRows > 1) {
            fieldSet.remove();
        }
    }

    function addVideoField(event) {
        const template = document.querySelector('#video-fields .video-template').cloneNode(true);
        template.classList.remove('video-template');

        const plusButton = template.querySelector('.fa-plus');
        if (plusButton) {
            plusButton.remove();
        }

        const minusButton = document.createElement('a');
        minusButton.className = 'fa fa-minus btn-save d-flex align-items-center justify-content-center col-md-3 mt-4';
        minusButton.setAttribute('onclick', 'removeVideoField(event)');
        template.querySelector('.col-md-4').appendChild(minusButton);

        const lastVideoField = document.querySelector('#video-fields .video-row:last-of-type');
        if (lastVideoField) {
            lastVideoField.insertAdjacentElement('afterend', template);
        } else {
            document.getElementById('video-fields').appendChild(template);
        }
    }

    function removeVideoField(event) {
        const fieldSet = event.target.closest('.row');
        const totalRows = document.querySelectorAll('#video-fields .video-row').length;
        if (totalRows > 1) {
            fieldSet.remove();
        }
    }


</script>

        @endsection