@extends('layout.master')

@section('content')
<style>
    .fa-minus,
    .fa-plus {
        color: white !important;
    }
    .padding-zero{
        padding: 0px !important;
    }
</style>
<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">Add Parts</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">All Document</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Add Parts </li>
                    </ol>
                </div>

            </div>
            <!-- 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
            <!--Row-->
            <div class="row row-sm">
                <div class="col-lg-12">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-body">
                            <div class="container">


                                <form method="post" action="{{ route('parts.store')  }}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">

                                        <div class="col-md-6 col-sm-12">
                                            <div class=" font-weight-semibold">Part Name</div>
                                            <input type="name" name="part_name" class="form-control mt-1"
                                                value="{{ old(" part_name") }}">
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class=" font-weight-semibold">Link Title</div>
                                            <input type="name" name="link_title" class="form-control mt-1"
                                                value="{{ old(" link_title") }}">
                                        </div>
                                        <div class="col-md-12 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Part Full Description</div>
                                            <textarea class="form-control mt-1" name="part_full_desc" id="" cols="4"
                                                rows="4" value="{{ old(" part_full_desc") }}"></textarea>
                                        </div>


                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold mt-1">Select Category</div>
                                            <select name="category" id="category" class="form-control select2 mt-5">
                                                <option label="Select Category">Select Option</option>
                                                <option value="5">
                                                    Cooling</option>
                                                <option value="14">
                                                    Heat Pump
                                                </option>
                                                <option value="15">
                                                    Heating
                                                </option>
                                                <option value="29">
                                                    Temperature Control
                                                </option>
                                                <option value="11">
                                                    Electrical Distribution Panel
                                                </option>
                                                <option value="10">
                                                    Electrical Accessories
                                                </option>
                                                <option value="17">
                                                    Lighting - Exterior
                                                </option>
                                                <option value="18">
                                                    Lighting - Interior
                                                </option>
                                                <option value="6">
                                                    Door
                                                </option>
                                                <option value="24">
                                                    Roll Up Door
                                                </option>
                                                <option value="25">
                                                    Separation Walls
                                                </option>
                                                <option value="7">
                                                    Door Access
                                                </option>
                                                <option value="18">
                                                    Explosion Relief Construction
                                                </option>
                                                <option value="12">
                                                    Lighting - Interior
                                                </option>
                                                <option value="13">
                                                    Fire Suppression
                                                </option>
                                                <option value="2">
                                                    Alarm
                                                </option>
                                                <option value="23">
                                                    Ramp
                                                </option>
                                                <option value="26">
                                                    Shelving
                                                </option>
                                                <option value="28">
                                                    Sump Accessories
                                                </option>
                                                <option value="30">
                                                    Ventilation
                                                </option>
                                                <option value="1">
                                                    Air Inlet
                                                </option>
                                                <option value="13">
                                                    Fire Suppression
                                                </option>
                                                <option value="3">
                                                    Building Color
                                                </option>
                                                <option value="4">
                                                    Bunker Access
                                                </option>
                                                <option value="20">
                                                    Miscellaneous
                                                </option>
                                                <option value="21">
                                                    Plumbing
                                                </option>
                                                <option value="8">
                                                    Door Location
                                                </option>
                                                <option value="9">
                                                    Door Orientation
                                                </option>
                                                <option value="19">
                                                    Misc
                                                </option>
                                                <option value="16">
                                                    Insulation
                                                </option>
                                                <option value="22">
                                                    Raise Building
                                                </option>

                                            </select>
                                        </div>



                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Unique Id</div>
                                            <input type="name" name="unique_id" id="unique_id"
                                                value="{{ $product_id + 1}}" class="form-control mt-1">
                                        </div>

                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">ManuFacture Id</div>
                                            <input type="name" name="manufacture_id" id="manufacture"
                                                class="form-control mt-1" value="{{ old(" manufacture_id") }}">
                                        </div>

                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Part No</div>
                                            <input type="name" name="part_no" class="form-control mt-1" value="{{ old("
                                                part_no") }}">
                                        </div>

                                        <div class="col-md-12 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Part Short Description</div>
                                            <textarea class="form-control mt-1" name="part_short_desc" id="" cols="4"
                                                rows="4" value="{{ old(" part_short_desc") }}"></textarea>
                                        </div>
                                        <div class="col-md-12 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Part Long Description</div>
                                            <textarea class="form-control mt-1" name="part_long_desc" id="" cols="4"
                                                rows="4" value="{{ old(" part_long_desc") }}"></textarea>
                                        </div>

                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Part Weight</div>
                                            <input type="name" name="part_weight" class="form-control mt-1"
                                                value="{{ old(" part_weight") }}">
                                        </div>
                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Amps Req</div>
                                            <input type="name" name="amps_req" class="form-control mt-1" value="{{ old("
                                                amps_req") }}">
                                        </div>
                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Manf Name</div>
                                            <input type="name" name="manf_name" class="form-control mt-1"
                                                value="{{ old(" part_name") }}">
                                        </div>
                                        <div class="col-md-6 col-sm-12 mt-2">
                                            <div class=" font-weight-semibold">Manf Part Name</div>
                                            <input type="name" name="manf_part_name" class="form-control mt-1"
                                                value="{{ old(" manf_part_name") }}">
                                        </div>

                                        <div class="d-flex p-0 m-0">
                                            <div class="col-md-6 p-0 m-0 mt-4" >
                                                <div id="assets-fields" class="container ">
                                                    <!-- Image Fields Section -->
                                                    <div class="row mb-4 ">
                                                        <div class="col-md-12 ">
                                                            <div class=" font-weight-semibold mb-2">Upload Images</div>
                                                            <div id="image-fields">
                                                                <div
                                                                    class="row row-sm align-items-center image-template image-row">
                                                                    <div class="col-md-12 col-sm-12">
                                                                        <div class=" font-weight-semibold">Image Name</div>
                                                                        <input type="text" name="image_name[]" class="form-control mt-1"
                                                                            value="{{ old("file_name") }}">
                                                                    </div>
                                                                    <div class="col-md-8 col-sm-12 mt-2">
                                                                        <input type="file" name="image[]"
                                                                            class="form-control mt-1"
                                                                            placeholder="Upload Image">
                                                                    </div>
                                                                    <div
                                                                        class="col-md-4 col-sm-12 mt-2 w-75 d-flex justify-content-end">
                                                                        <a class="fa fa-plus btn-save"
                                                                            onclick="addImageField(event)"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                             <hr style="border: 1px solid black;">
                                                        </div>
                                                    </div>

                                                    <!-- Video Fields Section -->
                                                    <div class="row mb-2">
                                                        <div class="col-md-12">
                                                            <div class=" font-weight-semibold">Upload Videos</div>
                                                            <div id="video-fields">
                                                                <div
                                                                    class="row row-sm align-items-center video-template video-row">
                                                                    <div class="col-md-8 col-sm-12 mt-2">
                                                                        <input type="text" name="video[]"
                                                                            class="form-control mt-1"
                                                                            placeholder="Upload Video URL">
                                                                    </div>
                                                                    <div
                                                                        class="col-md-4 col-sm-12 mt-4 d-flex justify-content-end">
                                                                        <a class="fa fa-plus btn-save"
                                                                            onclick="addVideoField(event)"></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                             <hr style="border: 1px solid black;">
                                                        </div>
                                                    </div>
                                                </div>
                                                  
                                            </div>
                                            <div class=" col-md-6 mt-2">
                                                <div id="dynamic-fields">
                                                    <div class="row row-sm align-items-center template">
                                                        <div class="col-md-8 col-sm-12">
                                                            <div class="mt-5">
                                                                <div class="font-weight-semibold">Select</div>
                                                                <select name="file_type[]" class="form-control mt-1">
                                                                    <option label="Select"></option>
                                                                    <option value="file">File</option>
                                                                    <option value="image">Image</option>
                                                                    <option value="video">Video</option>
                                                                </select>
                                                            </div>
                                                            <div class="mt-4">
                                                                <div class="font-weight-semibold mb-3">Upload Document</div>
                                                                <div class="col-md-12 padding-zero">
                                                                        <div class=" font-weight-semibold">File Name</div>
                                                                        <input type="text" name="file_name[]" class="form-control mt-1"
                                                                            value="{{ old("file_name") }}">
                                                                    </div>
                                                                <input type="file" name="file[]"
                                                                    class="form-control mt-3">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-4 col-sm-12 d-flex justify-content-end">
                                                            <a class="fa fa-plus btn-save"
                                                                onclick="addField(event)"></a>
                                                        </div>
                                                    </div>
                                                    <hr style="border: 1px solid black;">
                                                </div>

                                              

                                            </div>
                                        </div>


                                        <div class="col-md-12 mt-4 col-sm-12 d-flex justify-content-end">
                                            <button class=" btn-save" type="submit">Add</button>
                                        </div>

                                    </div>

                            </div>
                            </form>
                        </div>
                    </div>
                </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