@push('styles')
    <style>
        .avatar-upload {
            position: relative;
            max-width: 288px;
        }

        .avatar-upload .avatar-edit {
            position: absolute;
            right: 12px;
            z-index: 1;
            top: 10px;
        }

        .avatar-upload .avatar-edit input {
            display: none;
        }

        .avatar-upload .avatar-edit label {
            display: inline-block;
            width: 40px;
            height: 40px;
            margin-bottom: 0;

            background: #FFFFFF;
            border: 1px solid transparent;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
            cursor: pointer;
            font-weight: normal;
            transition: all .2s ease-in-out;
        }

        .avatar-upload .avatar-edit label:hover {
            background: #f1f1f1;
            border-color: #d6d6d6;
        }

        .avatar-upload .avatar-edit label:after {
            product: "\f040";
            font-family: 'FontAwesome';
            color: #757575;
            position: absolute;
            top: 10px;
            left: 0;
            right: 0;
            text-align: center;
            margin: auto;
        }

        .avatar-upload .avatar-preview {
            width: 300px;
            height: 300px;
            position: relative;

            border: 6px solid #F8F8F8;
            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        }

        .avatar-upload .avatar-preview>div {
            width: 100%;
            height: 100%;

            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
@endpush

<div class="m-2 row">
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <strong>Hey !</strong> Slug will be generated automatically 😊
        <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    @if (isset($product) && $product->photo)
        <input type="hidden" name="photo_current" value="{{ $product->photo }}">
    @endif
    @if (isset($product) && $product->file)
        <input type="hidden" name="file_current" value="{{ $product->file }}">
    @endif
    @if (isset($product) && $product->image)
        <input type="hidden" name="image_current" value="{{ $product->image }}">
    @endif

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="photo">Thumbnail Image </label>
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="productImageUpload" accept=".png, .jpg, .jpeg" class="d-none"
                    name="photo" />
                <label for="productImageUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div class="mx-auto image-preview" id="thumbnail-preview"
                    style="background-image: url('{{ isset($product) && $product->photo ? asset('storage/' . $product->photo) : asset('assets/img/thumbnail.png') }}');">
                </div>
            </div>
        </div>
        @if (isset($product->photo))
            <button type="button" class="btn btn-danger mt-2 remove-btn" id="remove-photo"><i class="fa fa-trash"
                    aria-hidden="true"></i></button>
        @endif
        @error('photo')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="image">Product Image </label>
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="productPhotoUpload" accept=".png, .jpg, .jpeg" class="d-none"
                    name="image" />
                <label for="productPhotoUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div class="mx-auto image-preview" id="product-image-preview"
                    style="background-image: url('{{ isset($product) && $product->image ? asset('storage/' . $product->image) : asset('assets/img/product.png') }}');">
                </div>
            </div>
        </div>
        @if (isset($product->image))
            <button type="button" class="btn btn-danger mt-2 remove-btn" id="remove-image"><i class="fa fa-trash"
                    aria-hidden="true"></i></button>
        @endif
        @error('image')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="file">File </label>
        <div class="avatar-upload">
            <div class="avatar-edit">
                <input type='file' id="productFileUpload" accept=".png, .jpg, .jpeg" class="d-none" name="file" />
                <label for="productFileUpload" class="btn btn-primary"></label>
            </div>
            <div class="avatar-preview">
                <div class="mx-auto image-preview" id="file-preview"
                    style="background-image: url('{{ isset($product) && $product->file ? asset('storage/' . $product->file) : asset('assets/img/cover.png') }}');">
                </div>
            </div>
        </div>
        @if (isset($product->file))
            <button type="button" class="btn btn-danger mt-2 remove-btn" id="remove-file"><i class="fa fa-trash"
                    aria-hidden="true"></i></button>
        @endif
        @error('file')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>




    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="featured_id">Featured <span class="text-danger">*</span></label>
        <select class="form-control @error('featured_id') error-field @enderror select" name="featured_id">
            <option value="" disabled selected>Select Featured</option>
            @foreach ($featureds as $featured)
                <option value="{{ $featured->id }}"
                    {{ old('featured_id') == $featured->id || (isset($product) && $product->featured_id == $featured->id) ? 'selected' : '' }}>
                    {{ $featured->name }}
                </option>
            @endforeach
        </select>
        @error('featured_id')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="name">Name <span class="text-danger">*</span> <span class="badge rounded-pill text-bg-info"
                id="slugPreview"></span></label>
        <input type="text" class="form-control @error('name') error-field @enderror" name="name" id="name"
            value="{{ old('name', isset($product) ? $product->name : null) }}" required>
        <input type="hidden" class="form-control @error('slug') error-field @enderror" name="slug" id="slug"
            value="{{ old('slug', isset($product) ? $product->slug : null) }}" required>
        @error('name')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="interest_rate">Interest Rate <span class="text-danger">*</span></label>
        <input type="text" class="form-control @error('interest_rate') error-field @enderror" name="interest_rate"
            id="interest_rate" value="{{ old('interest_rate', isset($product) ? $product->interest_rate : null) }}"
            required>
        @error('interest_rate')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-12 form-group">
        <label for="description">Description <span class="text-danger">*</span></label>
        <textarea class="editor form-control @error('description') error-field @enderror" name="description"
            id="description">{{ old('description', isset($product) ? $product->description : null) }}</textarea>
        @error('description')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <fieldset class="border p-2 mt-4">
        <legend class="float-none w-auto px-3 text-uppercase text-md font-weight-bold">Feature(s)</legend>
        <div class="col-sm-12 col-md-12 col-lg-12 form-group">
            <div class="text-danger small error"></div>

            <table class="table table-sm table-borderless" id="featurePointsDetailsTable">
                <tbody id="featurePointsDetailsBody">
                    @if (isset($product->featurePointsDetails))
                        @foreach ($product->featurePointsDetails as $key => $value)
                            @include('product.partials.feature-points', ['point' => $value])
                        @endforeach
                    @elseif(old('feature_point_name'))
                        @foreach (old('feature_point_name') as $key => $old)
                            @include('product.partials.feature-points', ['index' => $key])
                        @endforeach
                    @else
                        @include('product.partials.feature-points')
                    @endif
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <button type="button" class="add-feature-btn btn btn-sm btn-secondary"><i
                                    class="fa fa-plus" aria-hidden="true"></i>&nbsp; Add Features&nbsp;</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </fieldset>

    <fieldset class="border p-2 mt-4">
        <input type="hidden" name="feature_file_count" id="featureFileCount">
        <legend class="float-none w-auto px-3 text-uppercase text-md font-weight-bold">File(s)</legend>
        <div class="col-sm-12 col-md-12 col-lg-12 form-group">
            <div class="text-danger small error"></div>

            <table class="table table-sm table-borderless" id="featureFilesDetailsTable">
                <tbody id="featureFilesDetailsBody">
                    @if (isset($product->featureFilesDetails))
                        @foreach ($product->featureFilesDetails as $key => $value)
                            @include('product.partials.feature-files', ['file' => $value])
                        @endforeach
                    @elseif(old('feature_file_name'))
                        @foreach (old('feature_file_name') as $key => $old)
                            @include('product.partials.feature-files', ['index' => $key])
                        @endforeach
                    @else
                        @include('product.partials.feature-files')
                    @endif
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <button type="button" class="add-file-btn btn btn-sm btn-secondary"><i
                                    class="fa fa-plus" aria-hidden="true"></i>&nbsp; Add Files&nbsp;</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </fieldset>

    <fieldset class="border p-2 mt-4">
        <legend class="float-none w-auto px-3 text-uppercase text-md font-weight-bold">Document Requirement(s)</legend>
        <div class="col-sm-12 col-md-12 col-lg-12 form-group">
            <div class="text-danger small error"></div>

            <table class="table table-sm table-borderless" id="featureRequirementsDetailsTable">
                <tbody id="featureRequirementsDetailsBody">
                    @if (isset($product->featureRequirementsDetails))
                        @foreach ($product->featureRequirementsDetails as $key => $value)
                            @include('product.partials.feature-requirements', ['requirement' => $value])
                        @endforeach
                    @elseif(old('feature_requirement_name'))
                        @foreach (old('feature_requirement_name') as $key => $old)
                            @include('product.partials.feature-requirements', ['index' => $key])
                        @endforeach
                    @else
                        @include('product.partials.feature-requirements')
                    @endif
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <button type="button" class="add-document-btn btn btn-sm btn-secondary"><i
                                    class="fa fa-plus" aria-hidden="true"></i>&nbsp; Add Documents Name
                                &nbsp;</button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </fieldset>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="display_order">Display Order <span class="text-danger">*</span></label>
        <input type="number" class="form-control @error('display_order') error-field @enderror" name="display_order"
            id="display_order" value="{{ old('display_order', isset($product) ? $product->display_order : null) }}"
            required>
        @error('display_order')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>

    <div class="col-sm-12 col-md-6 col-lg-4 form-group">
        <label for="is_active">Is Active? <span class="text-danger">*</span></label>
        <br>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="yes" value=1
                {{ isset($product) ? ($product->is_active == 1 ? 'checked' : null) : 'checked' }}>
            <label class="form-check-label" for="yes">Yes</label>
        </div>

        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="is_active" id="no" value=0
                {{ isset($product) ? ($product->is_active == 0 ? 'checked' : null) : null }}>
            <label class="form-check-label" for="no">NO</label>
        </div>

        @error('is_active')
            <div class="text-danger small">{{ $message }}</div>
        @enderror
    </div>
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            $(".avatar-edit input[type=file]").change(function() {
                readURL(this);
            });
        });

        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $(input).closest(".avatar-upload").find(".image-preview").css('background-image', 'url(' + e.target
                        .result + ')');
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

        featureFilesIndex = {{ isset($product) ? count($product->featureFilesDetails) - 1 : 0 }};
        $(document).on('click', '.add-file-btn', function() {
            featureFilesIndex = featureFilesIndex + 1;
            $.ajax({
                type: "GET",
                url: "{{ route('feature-file') }}",
                data: {
                    index: featureFilesIndex,
                },
                success: function(response) {
                    $('#featureFilesDetailsBody').append(response);
                }
            });
        });
        featurePointsIndex = {{ isset($product) ? count($product->featurePointsDetails) - 1 : 0 }};
        $(document).on('click', '.add-feature-btn', function() {
            featurePointsIndex = featurePointsIndex + 1;
            $.ajax({
                type: "GET",
                url: "{{ route('feature-point') }}",
                data: {
                    index: featurePointsIndex,
                },
                success: function(response) {
                    $('#featurePointsDetailsBody').append(response);
                }
            });
        });

        featureRequirementsIndex = {{ isset($product) ? count($product->featureRequirementsDetails) - 1 : 0 }};
        $(document).on('click', '.add-document-btn', function() {
            featureRequirementsIndex = featureRequirementsIndex + 1;
            $.ajax({
                type: "GET",
                url: "{{ route('feature-requirement') }}",
                data: {
                    index: featureRequirementsIndex,
                },
                success: function(response) {
                    $('#featureRequirementsDetailsBody').append(response);
                }
            });
        });

        $(document).on("click", ".remove", function() {
            $(this).closest("tr").remove();
        });


        $(document).on('change', '.feature_requirement_name', function() {
            var index = $(this).data('id');
            $('#current_feature_requirement_' + index).val(null);
            $('#viewFeatureRequirementFile' + index).addClass('d-none');
        });

        $(document).on('change', '.product_file', function() {
            index = $(this).data('id');

            $('#current_product_file_' + index).val(null);
            $('#viewFile' + index).addClass('d-none')
        });

        $(document).on('change', '.feature_point_name', function() {
            var index = $(this).data('id');
            $('#current_feature_point_' + index).val(null);
            $('#viewFeatureFile' + index).addClass('d-none');
        });

        document.addEventListener("DOMContentLoaded", function() {
            // Handle remove button for photo
            document.getElementById("remove-photo")?.addEventListener("click", function() {
                if (confirm("Are you sure you want to remove this photo?")) {
                    // Mark the photo for deletion
                    document.querySelector('input[name="photo_current"]').value = "";
                    // Optionally hide the preview
                    document.getElementById("thumbnail-preview").style.backgroundImage =
                        "url('/assets/img/thumbnail.png')";
                }
            });

            // Handle remove button for image
            document.getElementById("remove-image")?.addEventListener("click", function() {
                if (confirm("Are you sure you want to remove this image?")) {
                    // Mark the image for deletion
                    document.querySelector('input[name="image_current"]').value = "";
                    // Optionally hide the preview
                    document.getElementById("product-image-preview").style.backgroundImage =
                        "url('/assets/img/product.png')";
                }
            });

            // Handle remove button for file
            document.getElementById("remove-file")?.addEventListener("click", function() {
                if (confirm("Are you sure you want to remove this file?")) {
                    // Mark the file for deletion
                    document.querySelector('input[name="file_current"]').value = "";
                    // Optionally hide the preview
                    document.getElementById("file-preview").style.backgroundImage =
                        "url('/assets/img/cover.png')";
                }
            });
        });
    </script>
@endpush