@extends('layout.master')

@section('content')

<style>
    .fa-minus,
    .fa-plus {
        color: white !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">Edit Part</h2>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">All Parts</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Edit Part </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.update',$product_id->id)  }}"
                                    enctype="multipart/form-data">
                                    @csrf
                                    @method('put')
                                    <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" value="{{ $product_id->part_name }}"
                                                class="form-control mt-1">
                                        </div>
                                        <div class="col-md-6 col-sm-12">
                                            <div class=" font-weight-semibold">Link Title</div>
                                            <input type="name" name="link_title" value="{{ $product_id->link_title }}"
                                                class="form-control mt-1">
                                        </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"
                                                value="{{ $product_id->part_full_desc }}" name="part_full_desc" id=""
                                                cols="4" rows="4">{{ $product_id->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" {{ $product_id->category == 5 ? 'selected' : ''
                                                    }}>Cooling</option>
                                                <option value="14" {{ $product_id->category == 14 ? 'selected' : ''
                                                    }}>Heat Pump</option>
                                                <option value="15" {{ $product_id->category == 15 ? 'selected' : ''
                                                    }}>Heating</option>
                                                <option value="29" {{ $product_id->category == 29 ? 'selected' : ''
                                                    }}>Temperature Control</option>
                                                <option value="11" {{ $product_id->category == 11 ? 'selected' : ''
                                                    }}>Electrical Distribution Panel</option>
                                                <option value="10" {{ $product_id->category == 10 ? 'selected' : ''
                                                    }}>Electrical Accessories</option>
                                                <option value="17" {{ $product_id->category == 17 ? 'selected' : ''
                                                    }}>Lighting - Exterior</option>
                                                <option value="18" {{ $product_id->category == 18 ? 'selected' : ''
                                                    }}>Lighting - Interior</option>
                                                <option value="6" {{ $product_id->category == 6 ? 'selected' : ''
                                                    }}>Door</option>
                                                <option value="24" {{ $product_id->category == 24 ? 'selected' : ''
                                                    }}>Roll Up Door</option>
                                                <option value="25" {{ $product_id->category == 25 ? 'selected' : ''
                                                    }}>Separation Walls</option>
                                                <option value="7" {{ $product_id->category == 7 ? 'selected' : ''
                                                    }}>Door Access</option>
                                                <option value="18" {{ $product_id->category == 18 ? 'selected' : ''
                                                    }}>Explosion Relief Construction</option>
                                                <option value="12" {{ $product_id->category == 12 ? 'selected' : ''
                                                    }}>Lighting - Interior</option>
                                                <option value="13" {{ $product_id->category == 13 ? 'selected' : ''
                                                    }}>Fire Suppression</option>
                                                <option value="2" {{ $product_id->category == 2 ? 'selected' : ''
                                                    }}>Alarm</option>
                                                <option value="23" {{ $product_id->category == 23 ? 'selected' : ''
                                                    }}>Ramp</option>
                                                <option value="26" {{ $product_id->category == 26 ? 'selected' : ''
                                                    }}>Shelving</option>
                                                <option value="28" {{ $product_id->category == 28 ? 'selected' : ''
                                                    }}>Sump Accessories</option>
                                                <option value="30" {{ $product_id->category == 30 ? 'selected' : ''
                                                    }}>Ventilation</option>
                                                <option value="1" {{ $product_id->category == 1 ? 'selected' : '' }}>Air
                                                    Inlet</option>
                                                <option value="13" {{ $product_id->category == 13 ? 'selected' : ''
                                                    }}>Fire Suppression</option>
                                                <option value="3" {{ $product_id->category == 3 ? 'selected' : ''
                                                    }}>Building Color</option>
                                                <option value="4" {{ $product_id->category == 4 ? 'selected' : ''
                                                    }}>Bunker Access</option>
                                                <option value="20" {{ $product_id->category == 20 ? 'selected' : ''
                                                    }}>Miscellaneous</option>
                                                <option value="21" {{ $product_id->category == 21 ? 'selected' : ''
                                                    }}>Plumbing</option>
                                                <option value="8" {{ $product_id->category == 8 ? 'selected' : ''
                                                    }}>Door Location</option>
                                                <option value="9" {{ $product_id->category == 9 ? 'selected' : ''
                                                    }}>Door Orientation</option>
                                                <option value="19" {{ $product_id->category == 19 ? 'selected' : ''
                                                    }}>Misc</option>
                                                <option value="16" {{ $product_id->category == 16 ? 'selected' : ''
                                                    }}>Insulation</option>
                                                <option value="22" {{ $product_id->category == 22 ? 'selected' : ''
                                                    }}>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" readonly id="unique_id"
                                                value="{{ $product_id->unique_id }}" 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" readonly
                                                value="{{ $product_id->manufacture_id }}" id="manufacture"
                                                class="form-control mt-1">
                                        </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" value="{{ $product_id->part_no }}"
                                                class="form-control mt-1">
                                        </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"> {{ $product_id->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">  {{ $product_id->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" value="{{ $product_id->part_weight }}"
                                                class="form-control mt-1">
                                        </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" value="{{ $product_id->amps_req }}"
                                                class="form-control mt-1">
                                        </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" value="{{ $product_id->manf_name }}"
                                                class="form-control mt-1">
                                        </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"
                                                value="{{ $product_id->manf_part_name }}" class="form-control mt-1">
                                        </div>
                                        
                                        <div id="rowContainer">
                                          <label for="" class=" font-weight-semibold mt-4">Image</label>
                                        @forelse ($prductFile as $files)
                                            @if ($files->file_type == 'image')
                                                <div class="row  file-row" data-file-id="{{ $files->id }}">
                                                    <div class="col-md-8">
                                                    <label for="" class=" font-weight-semibold mt-4">Image Name</label>
                                                      
                                                    <input class="form-control mb-3" name="image_name[]" type="text" value="{{ $files['file_name']}}" placeholder="Image Name">
                                                    <input class="form-control" name="image[]" type="file" onchange="previewImage(event)">
                                                        <input type="hidden" placeholder="Image Name" name="image_ids[]" value="{{ $files->id }}">
                                                    </div>
                                                    <div class="col-md-2">
                                                        <img src="{{ $files->file }}" style="width:80px; height:80px;">
                                                    </div>
                                                    <div class="col-md-2 mt-3">
                                                    <button class="btn btn-danger delete-file-btn" data-file-id="{{ $files->id }}">Delete</button>
                                                    </div>
                                                    <!-- <div class="col-md-2 mt-3">
                                                        <button id="addRowBtn" class="btn p-2 btn-save fa fa-plus d-flex justify-content-center align-items-center"></button>
                                                    </div> -->
                                                </div>
                                            @endif
                                            @empty
                                            <div>
                                           <span style="color:red;"> No data available </span>
                                                </div>
                                        @endforelse
                                    </div>

                                    <div class="row ">
                                        <div class="col-md-2  ">
                                            <button id="addRowBtn" class="btn p-2 btn-save fa fa-plus col-md-3 mt-2  d-flex justify-content-center align-items-center"></button>
                                        </div>
                                    </div>
                                    <div  id="rowContainerVideo">
                                          <label for="" class=" font-weight-semibold mt-4">Video Url</label>
                                        @forelse ($prductFile as $files)
                                            @if ($files->file_type == 'video')
                                                <div class="row mt-4 file-row" data-file-id="{{ $files->id }}">
                                                    <div class="col-md-12">
                                                         
                                                        <input placeholder="Enter Video Url" class="form-control" type="text" name="video[]" value="{{ $files->file }}">
                                                        <input type="hidden" name="video_ids[]" value="{{ $files->id }}">
                                                    </div>
                                                    <div class="col-md-2 mt-3">
                                                        <button class="btn btn-danger delete-file-btn" data-file-id="{{ $files->id }}">Delete</button>
                                                    </div>
                                                  
                                                </div>
                                            @endif
                                            @empty
                                            <div>
                                           <span style="color:red;"> No data available </span>
                                                </div>
                                        @endforelse
                                        <div class="row">
                                            <div class="col-md-12 w-100  mt-4 d-flex justify-content-end align-items-center">
                                                <button id="addRowBtnVideo" class="col-md-1 btn p-2 btn-save fa fa-plus mb-2"></button>
                                            </div>
                                        </div>
                                    </div>
                                   
                                                    
                                        <div id="rowContainerSelect">
                                          <label for="" class=" font-weight-semibold mt-4">Asset File</label>

                                            @forelse ($prductFile as $files)
                                            @if ($files->file_type == 'file' || $files->file_type == 'assetimage')
                                                <div class="row file-row" data-file-id="{{ $files->id }}">
                                                    <div class="col-md-12">
                                                       <div class="font-weight-semibold">Select</div>
                                                        <select class="form-control mt-1" name="file_type[]">
                                                            <option label="Select"></option>
                                                            <option value="file" {{ $files->file_type == 'file' ? 'selected' : '' }}>File</option>
                                                            <option value="assetimage" {{ $files->file_type == 'assetimage' ? 'selected' : '' }}>Image</option>
                                                            <option value="assetvideo" {{ $files->file_type == 'assetvideo' ? 'selected' : '' }}>Video</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-12 mt-2">
                                                    <div class="font-weight-semibold mb-3"> File Name</div>

                                                    <input class="form-control" name="file_name[]" type="text" value="{{ $files['file_name']}}">

                                                           <div class="font-weight-semibold mb-3">Upload Document</div>
                                                        <input type="file" class="form-control" name="file[]">
                                                        <input type="hidden" name="file_ids[]" value="{{ $files->id }}">
                                                    </div>
                                                    <div class="col-md-12">
                                                        @if ($files->file_type == 'file')
                                                            <a href="{{ $files->file }}">File</a>
                                                        @elseif ($files->file_type == 'assetimage')
                                                            <img src="{{ $files->file }}" alt="Image" style="width:100px; height:100px;">
                                                        @elseif ($files->file_type == 'assetvideo')
                                                            <a href="{{ $files->file }}">Video</a>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-2 mt-3">
                                                    <button class="btn btn-danger delete-file-btn" data-file-id="{{ $files->id }}">Delete</button>
                                                </div>
                                                </div>
                                                @endif
                                                @empty
                                                <div class="row ">
                                                    <div class="col-md-12">
                                                       <div class="font-weight-semibold">Select</div>
                                                        <select class="form-control mt-1" name="file_type[]">
                                                            <option label="Select"></option>
                                                            <option value="file" >File</option>
                                                            <option value="assetimage" >Image</option>
                                                            <option value="assetvideo">Video</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-md-12 mt-2">
                                                    <div class="font-weight-semibold mb-3"> File Name</div>
                                                    <input class="form-control" name="file_name[]" type="text" value="{{ $files['file_name'] ?? ""}}">

                                                           <div class="font-weight-semibold mb-3">Upload Document</div>
                                                           
                                                        <input type="file" class="form-control" name="file[]">
                                                        
                                                    </div>
                                        @endforelse
                                               <div class="row">
                                                    <div class="col-md-12 w-100 d-flex justify-content-end align-items-center">
                                                        <button id="addRowBtnSelect" class="col-md-1 btn p-2 btn-save fa fa-plus mb-5"></button>
                                                    </div>
                                                </div>
                                        </div>
                                       

                                    </div>
                            </div>

                        

                        </div>

                    </div>

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

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

<script>
    function addRow(event) {
        event.preventDefault(); // Prevent the default button behavior
        var row = document.createElement('div');
        row.className = 'row ';
        row.innerHTML = `
            <div class="col-md-10 mt-4">
                <input class="form-control mb-3" name="image_name[]" type="text" value="">

                <input class="form-control " type="file" name="image[]" onchange="previewImage(event)">
            </div>
           
            <div class="col-md-2 mt-4">
                <button class="p-2 btn-save  removeRowBtn fa fa-minus"></button>
            </div>
            <div class="col-md-6">
                <img src="">
            </div>`;
        // Add event listener for the "-" button
        row.querySelector('.removeRowBtn').addEventListener('click', function() {
            row.remove();
        });

        document.getElementById('rowContainer').appendChild(row);
    }

    function previewImage(event) {
        var input = event.target;
        var reader = new FileReader();
        reader.onload = function() {
            var imgElement = input.closest('.row').querySelector('img');
            imgElement.src = reader.result;
        }
        reader.readAsDataURL(input.files[0]);
    }

    // Add event listener for the initial "+" button
    document.getElementById('addRowBtn').addEventListener('click', addRow);

    // Add event listener for the initial "-" button
    document.querySelectorAll('.removeRowBtn').forEach(function(button) {
        button.addEventListener('click', function() {
            this.closest('.row').remove();
        });
    });

    // Add previewImage event listener for initial file inputs
    document.querySelectorAll('input[type="file"]').forEach(function(input) {
        input.addEventListener('change', previewImage);
    });
</script>

<script>
    function addVideoRow(event) {
        event.preventDefault(); // Prevent the default button behavior
        var row = document.createElement('div');
        row.className = '';
        row.innerHTML = `
            <div class="">
                  
                <input class="form-control" type="text" name="video[]" onchange="updateHiddenInput(event)">
                <input type="hidden" name="video_ids[]">
            </div>
          <div class="row">
                                            <div class="col-md-12 w-100  mt-4 d-flex justify-content-end align-items-center">
                                                <button  class="col-md-1 btn p-2 btn-save fa fa-minus removeRowBtnVideo"></button>
                                            </div>
                                        </div>
           `;

   

        // Add event listener for the "-" button
        row.querySelector('.removeRowBtnVideo').addEventListener('click', function() {
            row.remove();
        });

        document.getElementById('rowContainerVideo').appendChild(row);
    }

    // Add event listener for the initial "+" button
    document.getElementById('addRowBtnVideo').addEventListener('click', addVideoRow);

    // Add event listener for the initial "-" button
    document.querySelectorAll('.removeRowBtnVideo').forEach(function(button) {
        button.addEventListener('click', function() {
            this.closest('.row').remove();
        });
    });
</script>

<script>
    function addRow(event) {
        event.preventDefault(); // Prevent the default button behavior
        var row = document.createElement('div');
        row.className = 'row mt-5';
        row.innerHTML = `
            <div class="col-md-12">
                 <div class="font-weight-semibold">Select</div>
                <select class="form-control mt-1" name="file_type[]">
                    <option label="Select"></option>
                    <option value="file">File</option>
                    <option value="assetimage">Image</option>
                    <option value="assetvideo">Video</option>
                </select>
            </div>
            <div class="col-md-12 mt-3">
                   <div class="font-weight-semibold mb-3"> File Name</div>
                <input class="form-control" name="file_name[]" type="text" value="">

                   <div class="font-weight-semibold mb-3"> Upload Document</div>
                <input type="file" name="file[]" class="form-control">
                <input type="hidden" name="file_ids[]">
            </div>
                <div class="row">
                                            <div class="col-md-12 w-100  mt-4 d-flex justify-content-end align-items-center">
                                                <button  class="col-md-1 btn p-2 btn-save fa fa-minus removeRowSelect"></button>
                                            </div>
                                        </div>
          
           `;

       

        // Add event listener for the "-" button
        row.querySelector('.removeRowSelect').addEventListener('click', function() {
            row.remove();
        });

        document.getElementById('rowContainerSelect').appendChild(row);
    }

    // Add event listener for the initial "+" button
    document.getElementById('addRowBtnSelect').addEventListener('click', addRow);

    // Add event listener for the initial "-" button
    document.querySelectorAll('.removeRowSelect').forEach(function(button) {
        button.addEventListener('click', function() {
            this.closest('.row').remove();
        });
    });
</script>

<script>
    function addField(event) {
        const template = document.querySelector('.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-2').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 mt-4';
        minusButton.setAttribute('onclick', 'removeImageField(event)');
        template.querySelector('.col-md-10').appendChild(minusButton);

        const lastImageField = document.querySelector('.image-fields .image-row:last-of-type');
        if (lastImageField) {
            lastImageField.insertAdjacentElement('afterend', template);
        } else {
            document.getElementsByClassName('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 mt-4';
        minusButton.setAttribute('onclick', 'removeVideoField(event)');
        template.querySelector('.col-md-10').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>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('.delete-btn').on('click', function () {
            var recordId = $(this).data('id');
            var dynamicField = $('#dynamic-field-' + recordId);

            $.ajax({
                url: '/deleteFile/' + recordId,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}' // Add CSRF token for security
                },
                success: function (response) {
                    if (response.success) {
                        dynamicField.fadeOut('slow', function () {
                            $(this).remove();
                        });
                        alert("successfully Delete!");
                    } else {
                        alert(response.error);
                    }
                },
                error: function (response) {
                    alert('An error occurred while deleting the record.');
                }
            });
        });
    });
</script>
<script>
$(document).ready(function() {
    $('.delete-file-btn').on('click', function(e) {
        e.preventDefault();

        var fileId = $(this).data('file-id');
        var row = $(this).closest('.file-row');

        if (confirm('Are you sure you want to delete this file?')) {
            $.ajax({
                url: '{{ route("product-file.destroy") }}',
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}',
                    id: fileId
                },
                success: function(response) {
                    if (response.success) {
                        row.remove();
                    } else {
                        alert('Error deleting file.');
                    }
                },
                error: function(xhr) {
                    alert('An error occurred.');
                }
            });
        }
    });
});
</script>
@endsection