@extends('layouts.app', ['page' => __('Proposals'), 'pageSlug' => 'Proposal'])

@section('content')

<style>
    .table{
        display: block;
        overflow-x: auto;
        overflow-y: clip;
        white-space: nowrap;
        min-height: 300px;
    }
    .view{
        color:#00dcff;
        text-decoration-line: underline;
    }
    .view:hover{
        color:#1b00fff0;
    }
    .dropdown .dropdown-menu, .dropup:not(.bootstrap-select) .dropdown-menu, .bootstrap-select .dropdown-menu:not(.inner), .dropdown-menu.bootstrap-datetimepicker-widget.bottom {
    
    top: -286% !important;
}
    
</style>




<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg ">
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-12">
          @if(session('success'))
              <div class="alert alert-success alert-dismissible fade show" id="alert-success" role="alert">
                  <span class="alert-text text-black">
                  {{ session('success') }}</span>
              </div>
          @endif
                <div class="content">
                        <div class="row">
    <div class="col-md-12">
        <div class="card ">
            <div class="card-header">
                <div class="row">
                    <div class="col-8">
                        <h4 class="card-title">Proposal List</h4>
                    </div>
                    <div class="col-4 text-right">
                        <a href="{{ route('proposal.add') }}" class="btn btn-sm btn-info">Add Proposal</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                
                <div class="">
                    <table class="table tablesorter table-responsive" id="tableID">
                        <thead class=" text-primary">
                            <tr>
                            <th scope="col">Proposal Number</th> 
                            <th scope="col">Customer Name</th>
                            <th scope="col">Customer Phone</th>
                            <th scope="col">Customer Email</th>
                            <th scope="col">Service Address</th>
                            <th scope="col">Billing Address</th>
                            <th scope="col">Total Amount</th>
                            <th scope="col">Status</th>
                            <th scope="col">Action</th>
                        </tr></thead>
                        <tbody>
                        @php($i = 1)
                        @foreach($proposals as $propsal)
                            <tr>
                            <td><a class="view" href="{{ url('proposal/view') }}/{{$propsal->id}}">{{ $propsal->proposal_number }}</a></td>
                            
                            <td>{{ $propsal->customer_name }}</td>
                            <td>{{ $propsal->customer_phone }}</td>
                            <td>{{ $propsal->customer_email }}</td>
                            <td>{{ $propsal->customer_service_address }}</td>
                            <td>{{ $propsal->customer_billing_address }}</td>
                            <td>₹ {{$propsal->total }}</td>
                            <td class="text-center">
                                    
                                    <select class="form-control" onchange="changeStatus(this.value, {{$propsal->id}})" style="width: auto;">
                                        <option value="1" @if($propsal->status == 1) selected @endif>Pending</option>
                                        <option value="2" @if($propsal->status == 2) selected @endif>Proposal Sent</option>
                                    </select>
                                </td>
                                    <td class="text-center">
                                            <div class="dropdown">
                                                <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-v"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                                                       {{-- <a class="dropdown-item" href="{{ url('proposal/view') }}/{{$propsal->id}}">View</a> --}}
                                                       <a class="dropdown-item" href="{{ url('proposal/view') }}/{{$propsal->id}}">View</a>
                                                       @if (auth::user()->role == 0)
                                                       <a class="dropdown-item" href="{{ url('proposal/edit') }}/{{$propsal->id}}">Edit</a>
                                                       <a class="dropdown-item" href="{{ url('proposal/delete') }}/{{$propsal->id}}">Delete</a>
                                                       {{-- <a class="dropdown-item" href="{{ route('proposal.pdf', ['id' => $propsal->id]) }}">Print</a>
                                                       <a class="dropdown-item" href="{{ route('proposal.mail', ['id' => $propsal->id]) }}">mail</a> --}}

                                                       @endif
                                                </div>
                                            </div>
                                    </td>
                                </tr>
                                   @endforeach
                                                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer py-4">
                <nav class="d-flex justify-content-end" aria-label="...">

                </nav>
            </div>
        </div>
        <!-- <div class="alert alert-danger">
                <span>
                  <b> </b> This is a <b>PRO</b> feature!</span>
              </div> -->
    </div>
</div>
                </div>

            
            </div>
        </div>
</main>
  
    
    <script>
        function changeStatus(selected_value, proposal_id)
        {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url : "{{ url('proposal/ChangeStatus') }}",
                data : {
                    'selected_value':selected_value,
                    'proposal_id' : proposal_id },
                type : 'POST',
                dataType : 'json',
                success : function(data){

                    if(data.success)
                    {
                        demo.showNotification('top','right','Proposal status changed successfully!!!',2);
                    }
                }
            });
        }
    </script>
    <script>
        function showRequirement(req)
        {
            swal(req);
        }
    
    </script>

@endsection