@extends('layouts.admin.app')
@section('content')

<style>
    /* Modal style */
    .modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 100px;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
    }

    .modal-content {
        margin: auto;
        display: block;
        max-width: 80%;
        max-height: 80%;
        width:auto !important;
        top: 60px;

    }

    /* Close button style */
    .close {
        color: #ccc;
        float: right;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>
    <div class="content-wrapper">
        <section class="content-header bg-white form-group p-3 p-md-4">
            <div class="row">
                <div class="col text-center text-sm-left">
                    <h3 class="text-primary text-md text-uppercase">
                        <img src="{{ asset('images/category-icon.png') }}" class="heading-desk align-middle" alt="">
                        view Customer Product Detail
                    </h3>
                </div>
            </div>
            <div class="clearfix"></div>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-lg-12">
                   
                        <div class="bg-white p-3 p-md-4 shadow">
                            <div class="row form-group pb-sm-2 align-items-center">
                                <div class="col-md-3 col-sm-4">
                                    <label for="date" class="mb-1 mb-sm-0 font-size-15"> 
                                        <b>Customer Name:</b> {{$customerproduct->customerdatas->dealer_name}} </label>
                                </div>
                                
                            </div>

                           
                           
                          

                            <div class="row form-group pb-sm-2 align-items-center">
                               
                                <div class="col-md-3 col-sm-4 mb-3" >
                                   
                                    
                                    @if(file_exists($customerproduct->productunits->product->product_img))
                                    <img height="100px" width="100px" src="{{asset($customerproduct->productunits->product->product_img)}}">
                                    @endif
                                   
                                    <label for="cash" class="mb-1 mb-sm-0 font-size-15"><b>Product Name:</b> {{$customerproduct->productunits->product->product_name}}</label>
                                    <label for="cash" class="mb-1 mb-sm-0 font-size-15"><b>Dealer Name:</b> {{$customerproduct->productunits->dealerdetails->dealer_name}}</label>

                                    

                                      <label for="cash" class="mb-1 mb-sm-0 font-size-15"><b>Start Date:</b> {{$customerproduct->start_date}}</label>
                                      <label for="cash" class="mb-1 mb-sm-0 font-size-15"><b>End Date:</b> {{$customerproduct->end_date}}</label> 
                                       <label for="cash" class="mb-1 mb-sm-0 font-size-15"><b>Barcode:</b> {{$customerproduct->barcode}}</label>
                                       
                                       
                                </div>
                               
                               
                            </div>
                            @if(!empty($customerproduct->dealer_form))
                            <div class="row">

                             <div class="col-lg-3" style="text-align: center;">
                              
        
            <img class="full-image" style="width:100px;" src="{{ asset($customerproduct->dealer_form) }}" >
            <br/>

            <a href="{{ asset($customerproduct->dealer_form) }}" download>
            Download Dealer Form

            </a>
        </div>
        <div class="col-lg-3" style="text-align: center;">

        <img class="full-image" style="width:100px;" src="{{ asset($customerproduct->
        company_form) }}" >
        <br/>
        <a href="{{ asset($customerproduct->company_form) }}" download>
        Download Company form
        </a>
        </div>
         <div class="col-lg-3" style="text-align: center;">
            
            <img class="full-image" style="width:100px;" src="{{ asset($customerproduct->warrenty_lastpage) }}" >
            <br/>
            <a href="{{ asset($customerproduct->warrenty_lastpage) }}" download>
 Download Warrenty Lastpage
</a>
        </div> 
        <div class="col-lg-3" style="text-align: center;">

        <img class="full-image" style="width:100px;" src="{{ asset($customerproduct->machine_installpage) }}" >
        <br/>
        <a href="{{ asset($customerproduct->machine_installpage) }}" download>
        Download Machine Installpage
        </a>

        </div>
    </div>
    
    @endif

        <div class="row">

        <div class="col-lg-6">


        <!-- Full image display modal -->
        <div style="width:1000px;" id="imageModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="fullImage">
        </div>
        </div>

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



    
                    
                </div>


           
        </section>
    </div>
    @section('admin-js')
        <script type="text/javascript" src="{{ asset('js/adminjs/dealear.js') }}"></script>

        <script>
    $(document).ready(function(){
        // When an image is clicked
        $(".full-image").click(function(){
            var imageUrl = $(this).attr("src"); // Get the image source
            $("#fullImage").attr("src", imageUrl); // Set the source of the modal image
            $("#imageModal").css("display", "block"); // Display the modal
        });

        // Close the modal when the close button is clicked
        $(".close").click(function(){
            $("#imageModal").css("display", "none");
        });
    });
</script>
    @endsection
@endsection