@extends('buyer.layout')
@section('title')
<title>Product Details</title>
@endsection
@section('frontend-content')
<div class="flex-grow-1 min-vh-100 d-flex flex-column">
    <div class="container my-5 overflow-auto">
        <div class="container my-2">
            <div class="row g-4">
                <!-- Product Details -->

                <div class="col-lg-1 ">
                    <div class="d-flex flex-wrap gap-2">
                        @php
                        $images = json_decode($product->product_image);
                        @endphp
                        @foreach($images as $key => $image)
                        <div class="thumbnail" style="width: 80px; cursor: pointer;" data-bs-target="#productImageCarousel" data-bs-slide-to="{{ $key }}">
                            <img
                                src="{{ asset('storage/' . $image) }}"
                                alt="Thumbnail {{ $key + 1 }}"
                                class="img-fluid border rounded">
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-5">
                    <div id="productImageCarousel" class="carousel slide" data-bs-ride="false">
                        <div class="carousel-inner">
                            @php
                            $images = json_decode($product->product_image);
                            @endphp
                            @foreach($images as $key => $image)

                            <div class="carousel-item {{ $key === 0 ? 'active' : '' }}">

                                <img
                                    id="zoom-image-{{ $key }}"
                                    src="{{ asset('storage/' . $image) }}"
                                    alt="Product Image {{ $key + 1 }}"
                                    class="img-fluid w-100 rounded zoomable">



                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div id="lens"></div>
                <div id="result"></div>

                <!-- Product Description -->
                <div class="col-lg-6">
                    <div class="bg-white p-4 rounded fs-sm-6 fs-md-5  text-muted shadow-sm">
                        <h2 class="text-dark">{{$product->product_name}}</h2>
                        @if ($product->rfid)
                        <div class="my-3">
                            <h6 class="badge bg-danger text-white fw-normal">
                                {{ $product->rfid }}
                            </h6>
                        </div>
                        @endif
                        {!! $product->product_description !!}
                        <button class="btn btn-primary px-5 py-2 w-100" data-bs-toggle="modal" data-bs-target="#exampleModal">Enquire Now</button>
                    </div>
                </div>
            </div>

            <!-- Tabs Section -->
            <div class="mt-5">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">DESCRIPTION</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="additional-info-tab" data-bs-toggle="tab" data-bs-target="#additional-info" type="button" role="tab" aria-controls="additional-info" aria-selected="false">ADDITIONAL INFORMATION</button>
                    </li>
                </ul>
                <div class="tab-content bg-white p-4 rounded fs-sm-6 fs-md-4 fs-lg-2 text-muted shadow-sm" id="myTabContent">
                    <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                        {!! $product->additional_description !!}
                        <!--<div class="tab-content-icons d-flex flex-wrap justify-content-around text-center gap-3 py-3">
                            <div class="d-flex flex-column align-items-center">
                                <img src="{{ asset('img/feather.bmp')}}" class="img-fluid rounded" style="max-width: 100px;">
                                <p class="small m-0">Light to heavy fabric gsm</p>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <img src="{{ asset('img/calendar.bmp')}}" class="img-fluid rounded" style="max-width: 100px;">
                                <p class="small m-0">15-45 days of lead time</p>
                            </div>
                            <div class="d-flex flex-column align-items-center">
                                <img src="{{ asset('img/time.bmp')}}" class="img-fluid rounded" style="max-width: 100px;">
                                <p class="small m-0">Ready fabric options for production</p>
                            </div>
                        </div>-->

                    </div>
                    <div class="tab-pane fade" id="additional-info" role="tabpanel" aria-labelledby="additional-info-tab">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <h5>FABRIC</h5>
                                <p>{{$product->faberic}}</p>
                            </li>
                            <li class="list-group-item">
                                <h5>CONSTRUCTION</h5>
                                <p>{{$product->construction}}</p>
                            </li>
                            <!-- <li class="list-group-item">
                                <h5>GSM</h5>
                                <p>250</p>
                            </li> -->
                            <li class="list-group-item">
                                <h5>COLOURS</h5>
                                <p>{{$product->colors}}</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="enquiryForm" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Send Us a Note</h5>
                        <!-- Close button -->
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        @if ($product->rfid)
                        <div class="my-3">
                            <h6 class="badge bg-danger text-white fw-normal">
                                {{ $product->rfid }}
                            </h6>
                        </div>
                        @endif
                        <div class="d-none mb-3">
                            <label for="user_id" class="form-label">User ID</label>
                            <input type="text" class="form-control" id="user_id" name="user_id">
                        </div>
                        <div class="d-none mb-3">
                            <label for="rfid" class="form-label">RFID</label>
                            <input type="text" class="form-control" id="rfid" name="rfid" value="{{ $product->rfid }}">
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="username" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">Message</label>
                            <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" form="enquiryForm" class="btn btn-primary">Submit</button>

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


@endsection

@section('custom-script')

<script>
    $(document).ready(function() {
        // Close the modal when the close button is clicked
        $('.btn-close').on('click', function() {
            $('#exampleModal').modal('hide');
        });
    });


    $(document).ready(function() {

        $('#enquiryForm').on('submit', function(e) {

            e.preventDefault();
            var submitButton = $(this).find('button[type="submit"]');
            submitButton.text('Submitting...').attr('disabled', true);

            var formData = new FormData(this);

            // Send AJAX request
            $.ajax({
                url: '/submit-enquiry', // Change to your actual endpoint
                type: 'POST',
                data: formData,
                processData: false, // Prevent jQuery from processing the data
                contentType: false, // Prevent jQuery from setting the content type
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Ensure CSRF token for Laravel
                },
                success: function(response) {

                    $('#enquiryForm')[0].reset(); // Clear the form
                    $('#exampleModal').modal('hide'); // Hide the modal
                    toastr.success('Your message has been sent successfully!', 'Success');
                },
                error: function(xhr, status, error) {
                    alert('An error occurred. Please try again.');
                }
            });

            submitButton.text('Submit').attr('disabled', false);
        });


    });


    $(document).ready(function() {
        // Handle tab switching
        $('#myTab button').on('click', function(e) {
            e.preventDefault();

            // Remove 'active' from all tabs
            $('#myTab button').removeClass('active');

            // Add 'active' to the clicked tab
            $(this).addClass('active');

            // Show the corresponding tab content
            $($(this).data('bs-target')).addClass('show active').siblings().removeClass('show active');
        });
    });
</script>

@endsection