@extends('layouts.basic')

@section('styles')
    <style>
        .share-container {
            position: relative;
        }

        .social-media-buttons {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;

        }

        .share-container:hover .social-media-buttons {
            display: block;
            width: 200px;
            height: 50px;

        }
        .btn {
        padding: -1.625rem 1.75rem;
        }
       

    </style>
    
    
@endsection
@section('content')
    <div class="container-fluid">
        <div class="page-title">
            <div class="row">
                <div class="col-6">
                    <h3>Quotation</h3>
                </div>
                <div class="col-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                        <li class="breadcrumb-item">Quotations</li>
                        <li class="breadcrumb-item active">Quotation-List</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                          <h4>Search</h4>
                          <form id="filterForm" class="row gy-2 gx-3 align-items-center">
                            <div class="col-auto">
                                <label for="customerName">Customer Name</label>
                                <select name="customerName" id="customerName" class="form-control" >
                                  <option>select customer name</option>
                                  @foreach ($cutomers as $customer)
                                  <option value="{{ $customer->id }}">{{ $customer->customer_name }}
                                  </option>
                                  @endforeach
                                </select>
                            </div>
                            <div class="col-auto">
                                <label for="mobileNumber">Mobile Number</label>
                                <input type="text" name="mobileNumber" id="mobileNumber" class="form-control" placeholder="enter mobile">
                            </div>
                            <div class="col-auto">
                                <label for="quotationNumber">Quotation Number</label>
                                <input type="text" name="quotationNumber" id="quotationNumber" class="form-control" placeholder="quotation no">
                            </div>
                            <div class="col-auto">
                                <label for="date">Date</label>
                                <input type="date" name="date" id="date" class="form-control">
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-dark" style="float:right;margin-top:1.5rem">Filter</button>
                            </div>
                        </form>
                        

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







    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <h4>Quotation-List</h4>

                            <table class="table table-bordered" id="quotationlist">
                                <thead class="thead-dark">
                                    <tr class="table-secondary">
                                        <th scope="col">S.NO</th>
                                        <th scope="col">Date</th>
                                        <th scope="col">Reference no</th>
                                        <th scope="col">Customer name</th>
                                        <th scope="col">Contact no</th>
                                        <th scope="col">Total</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($quotation as $quotations)
                                        <tr>
                                            <th scope="row">{{ $loop->iteration }}</th>
                                            <td>{{ date('d/m/Y', strtotime($quotations->date)) }}</td>

                                            <td>{{ $quotations->invoice_number }}</td>
                                            <td>{{ $quotations->customer->customer_name }}</td>
                                            <td>{{ $quotations->mobile_number }}</td>
                                            <td> &#8377;{{ $quotations->total }}</td>
                                            <td> 
                                                <select name="status" class="form-select" >
                                                    @foreach (['Pending', 'Accepted', 'Rejected'] as $status)
                                                        <option value="{{ $status }}" data_id="{{ $quotations->id }}"
                                                            @if (old('status', $quotations->status) == $status) selected @endif>
                                                            {{ ucfirst($status) }}</option>
                                                    @endforeach
                                                </select>

                                               <input type="text" id="in_id" name="in_id" value="{{$quotations->id }}" hidden>
                                            </td>
                                            <td>




                                                <div class="action-buttons-grid" style="display: flex;gap: 10px;">
                                                    <a href="{{ route('quotations.show', $quotations->id) }}"
                                                        class="btn btn-success btn-action" data-action="view">
                                                        <i class="fa fa-eye"></i>
                                                    </a>

                                                    <a href="{{ route('quotations.edit', $quotations->id) }}"
                                                        class="btn btn-secondary btn-action" data-action="edit">
                                                        <i class="fa fa-edit"></i>
                                                    </a>
                                                    <a href="{{ route('invoice1.pdf', ['id' => $quotations->id]) }}"
                                                        class="btn btn-primary btn-action" type="submit"
                                                        data-action="print">
                                                        <i class="fa fa-download"></i>
                                                    </a>
                                                
                                                    <form id="deleteForm" method="POST" action="{{ route('quotations.destroy',$quotations->id) }}">
                                                        @csrf
                                                        @method('DELETE')
                                                        <a id="deleteButton" class="btn btn-danger btn-action" type="button">
                                                            <i class="fa fa-trash"></i> 
                                                        </a>
                                                    </form>
                                                
                                                                            {{-- href="{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'facebook']) }}"
                                                                            href="{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'twitter']) }}" 
                                                                            href="{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'linkedin']) }}"
                                                                            href="{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'pinterest']) }}"
                                                                            href="{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'whatsapp']) }}" --}}




                                                                          




                                                    <div class="share-container">
                                                        <a class="btn btn-info share-button"><i
                                                                class="fa fa-share-alt" style="text-align: right;"></i></a>
                                                        <div class="social-media-buttons">

                                                            <a onclick="shareOnSocialMedia('{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'facebook']) }}')"
                                                                class="social-media-button facebook"><i
                                                                    class="fa fa-facebook"></i></a>
                                                            <a onclick="shareOnSocialMedia('{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'twitter']) }}')"
                                                                class="social-media-button twitter"><i
                                                                    class="fa fa-twitter"></i></a>
                                                            <a onclick="shareOnSocialMedia('{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'linkedin']) }}')"
                                                                class="social-media-button linkedin"><i
                                                                    class="fa fa-linkedin"></i></a>
                                                            <a onclick="shareOnSocialMedia('{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'pinterest']) }}')"
                                                                class="social-media-button pinterest"><i
                                                                    class="fa fa-pinterest"></i></a>
                                                            <a onclick="shareOnSocialMedia('{{ route('quotations.share', ['id' => $quotations->id, 'platform' => 'whatsapp']) }}')"
                                                                class="social-media-button whatsapp"><i
                                                                    class="fa fa-whatsapp"></i></a>
                                                        </div>

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

                                        </tr>
                                    @endforeach


                                </tbody>
                            </table>

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

        </div>
    </section>
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('.share-button').on('click', function() {
                $(this).siblings('.social-media-buttons').toggle();
            });
        });

        $('#quotationlist').DataTable( {
        responsive: true
        } );

    </script>
    <script>
        function shareOnSocialMedia(url) {
            $.ajax({
                url: url,
                method: 'GET',
                dataType: 'json', // Specify the expected response data type
                success: function(response) {
                    console.log(response);
                    // Replace 'response.url' with the actual property containing the response URL
                    if (response && response.url) {
                        window.location.href = response.url; // Redirect the user to the response URL
                    } else {
                        console.error('Invalid response or missing URL');
                    }
                },
                error: function() {
                    console.error('AJAX request failed');
                }
            });
        }






// status update ajax call using questation controller

        $(document).ready(function() {
          $('select[name="status"]').change(function() {
            var selectedOption = $(this).find('option:selected');
             var quotationId = selectedOption.attr('data_id');
    
              var selectedStatus = $(this).val();
              $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
              $.ajax({
                url:'update-quotation-status/' + quotationId,

                  method: 'POST',
                  data: {
                      status: selectedStatus,
                      id: quotationId,

                  },
                  success: function(response) {
                  // Display success alert
                
                    iziToast.success({
                    title: 'success',
                    message: response.success,
                  
                    });

                  },
                  error: function(xhr) {
              // Display error alert
                iziToast.error({
                title: 'error',
                message: xhr.responseText,
              
                });
                      
                    
                  }
              });
          });
      });


    </script>

{{-- delete ajax call  --}}
<script>
    document.getElementById('deleteButton').addEventListener('click', function () {
        if (confirm('Are you sure you want to delete this item?')) {
            // User confirmed deletion
            deleteItem();
        }
    });

    function deleteItem() {
        var form = document.getElementById('deleteForm');
        var url = form.action;

        var xhr = new XMLHttpRequest();
        xhr.open('Delete', url);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');

        xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            // Successful deletion
            iziToast.success({
                title: 'Success',
                message: 'Item deleted successfully.',
                position: 'topRight',
                timeout: 3000
            });
            // Perform any additional actions or page refresh if needed
        } else {
            // Error during deletion
            iziToast.error({
                title: 'Error',
                message: 'Error deleting item.',
                position: 'topRight',
                timeout: 3000
            });
        }
    }
};


        xhr.send();
    }
</script>

@endsection