@extends('layouts.app')

@section('title')
    Issue Open File
@stop

@section('breadcrumb')
    <ol class="breadcrumb pull-right">
        <li><a href="{{ route('home') }}"><i class="fa fa-dashboard"></i>Home</a></li>
        <li><a href="{{ route('openfile.view') }}">All Open File Packages List</a></li>
        <li class="active">Issue Open File</li>
    </ol>
@stop

@section('css')

    <style type="text/css">
    /* ::-webkit-scrollbar {
    width: 0.6em;
    
} */
 
 
    .swal-wide{
    /* width:850px !important;
    height: 850px !important; */
    font-size: 1.6rem !important;
    max-width: 
}
        tr:nth-child(even) {
            background-color: #c5c5c5
        }

        .whitebox3 {
            /* background:#ddd; */
            background: #ededed;
            padding: 18px 25px 10px 25px;
            margin-bottom: 30px;
            border-radius: 4px;
        }

        .description-prod .inside {
            /* z-index: 9;
     background: #92879b;
     width: 140px;
     height: 140px;
     position: absolute;
     top: -70px;
     right: -70px;
     border-radius: 0px 0px 200px 200px;
     transition: all 0.5s, border-radius 2s, top 1s;
     overflow: hidden; */
            /* /   z-index: 9;
        background: #bab5bf;
        width: 43px;
        height: 17px;
        position: absolute;
        top: 5px;
        right: 1px;
        border-radius: 0px 0px 200px 200px;
        transition: all 0.5s, border-radius 2s, top 1s;
        overflow: hidden; */

            /* z-index: 9;
        background: #92879b;
        width: 19px;
        height: 17px;
        position: absolute;
        top: 5px;
        right: 8px;
        border-radius: 50%;
        overflow: hidden; */

            z-index: 9;
            background: #bab5bf;
            width: 15px;
            height: 16px;
            position: absolute;
            top: 5px;
            right: 1px;
            border-radius: 50%;
            transition: all 0.5s, border-radius 2s, top 1s;
            overflow: hidden;
        }

        .description-prod .inside .icon {
            /* position: absolute;
     right: 85px;
     top: 85px;
     color: white;
     opacity: 1; */
            position: absolute;
            /* right: 19px; */
            right: 2px;
            top: -1px;
            color: black;
            /* color: #f8f7f7; */
            opacity: 1;

            /* position: absolute;
        right: 4px;
        top: -1px;
        color: #f8f7f7;
        opacity: 1; */
        }

        .description-prod .inside:hover {
            width: 100%;
            right: 0;
            top: 0;
            border-radius: 0;
            height: 80%;

        }

        /* .description-prod .inside:hover .icon {
     opacity: 0;
     right: 15px;
     top: 15px;
    }*/
        .description-prod .inside:hover .contents {
            opacity: 1;
            transform: scale(1);
            transform: translateY(0);
        }

        .description-prod .inside .contents {
            padding: 5%;
            opacity: 0;
            transform: scale(0.5);
            transform: translateY(-200%);
            transition: opacity 0.2s, transform 0.8s;
        }

        .description-prod .inside .contents table {
            text-align: left;
            width: 100%;
        }

        .description-prod .inside .contents h1,
        .wrapper .inside .contents p,
        .wrapper .inside .contents table {
            color: white;
        }

        .description-prod .inside .contents p {
            font-size: 13px;
        }


        @import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i');

        body {
            font-family: 'Muli', sans-serif;
            background: #ddd;
        }

        .shell {
            padding: 0 0;
        }

        .wsk-cp-product {
            background: #fff;
            padding: 15px;
            border-radius: 6px;
            box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
            /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
            position: relative;
            margin: 20px auto;
        }

        .wsk-cp-img {
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translate(-50%);
            -webkit-transform: translate(-50%);
            -ms-transform: translate(-50%);
            -moz-transform: translate(-50%);
            -o-transform: translate(-50%);
            -khtml-transform: translate(-50%);
            width: 100%;
            padding: 15px;
            transition: all 0.2s ease-in-out;
        }

        .wsk-cp-img img {
            width: 100%;
            transition: all 0.2s ease-in-out;
            border-radius: 6px;
        }

        .wsk-cp-product:hover .wsk-cp-img {
            /* top:-40px; */
            top: 40px;
        }

        .wsk-cp-product:hover .wsk-cp-img img {
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
        }

        .wsk-cp-text {
            /* padding-top:150%; */
            padding-top: 33%;
        }

        .wsk-cp-text .category {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            margin-bottom: 45px;
            position: relative;
            transition: all 0.2s ease-in-out;
        }

        .wsk-cp-text .category>* {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            -khtml-transform: translate(-50%, -50%);

        }

        .wsk-cp-text .category>span {
            padding: 12px 30px;
            border: 1px solid #313131;
            background: #212121;
            color: #fff;
            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
            border-radius: 12px;
            transition: all 0.05s ease-in-out;

        }

        .wsk-cp-product:hover .wsk-cp-text .category>span {
            border-color: #ddd;
            box-shadow: none;
            padding: 11px 28px;
        }

        .wsk-cp-product:hover .wsk-cp-text .category {
            margin-top: 0px;
        }

        .wsk-cp-text .title-product {
            text-align: center;
        }

        .wsk-cp-text .title-product h3 {
            font-size: 20px;
            font-weight: bold;
            margin: 15px auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 100%;
        }

        .wsk-cp-text .description-prod p {
            margin: 0;
        }

        /* Truncate */
        .wsk-cp-text .description-prod {
            text-align: center;
            width: 100%;
            height: 62px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            margin-bottom: 15px;
        }

        .card-footer {
            padding: 25px 0 5px;
            border-top: 1px solid #ddd;
        }

        .card-footer:after,
        .card-footer:before {
            content: '';
            display: table;
        }

        .card-footer:after {
            clear: both;
        }

        .card-footer .wcf-left {
            float: left;

        }

        .card-footer .wcf-right {
            float: right;
        }

        .price {
            font-size: 18px;
            font-weight: bold;
        }

        a.buy-btn {
            display: block;
            color: #212121;
            text-align: center;
            font-size: 18px;
            width: 35px;
            height: 35px;
            line-height: 35px;
            border-radius: 50%;
            border: 1px solid #212121;
            transition: all 0.2s ease-in-out;
        }

        a.buy-btn:hover,
        a.buy-btn:active,
        a.buy-btn:focus {
            border-color: #FF9800;
            background: #FF9800;
            color: #fff;
            text-decoration: none;
        }

        .wsk-btn {
            display: inline-block;
            color: #212121;
            text-align: center;
            font-size: 18px;
            transition: all 0.2s ease-in-out;
            border-color: #FF9800;
            background: #FF9800;
            padding: 12px 30px;
            border-radius: 27px;
            margin: 0 5px;
        }

        .wsk-btn:hover,
        .wsk-btn:focus,
        .wsk-btn:active {
            text-decoration: none;
            color: #fff;
        }

        .red {
            color: #F44336;
            font-size: 22px;
            display: inline-block;
            margin: 0 5px;
        }

        @media screen and (max-width: 991px) {
            .wsk-cp-product {
                margin: 40px auto;
            }

            .wsk-cp-product .wsk-cp-img {
                top: -40px;
            }

            .wsk-cp-product .wsk-cp-img img {
                box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
            }

            .wsk-cp-product .wsk-cp-text .category>span {
                border-color: #ddd;
                box-shadow: none;
                padding: 11px 28px;
            }

            .wsk-cp-product .wsk-cp-text .category {
                margin-top: 0px;
            }

            a.buy-btn {
                border-color: #FF9800;
                background: #FF9800;
                color: #fff;
            }
        }
    </style>

@stop

@section('content')

    <div class="container-fluid">
        {{-- <form method="post" action="{{ route('openfile.store') }}" class="form-horizontal" id="receipt_form">
            {{ csrf_field() }} --}}
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                @if ($errors->any())
                    <div class="white-box">
                        <h2>Errors</h2>
                        <ul>
                            {!! implode(
                                '',
                                $errors->all('<li><span
                                                                                                                                            class="help-block"><strong>:message</strong></span></li>'),
                            ) !!}
                        </ul>
                    </div>
                @endif
                <div class="whitebox3">
                    <h3 class="box-title" style="font-size: 18px; font-weight: 700;"><i class="fa fa-file" aria-hidden="true"></i> Issue Open File Package</h3>
                    <p>All Open Files Packages are mentioned below</p>
                    <hr>

                    {{-- Packages --}}



                    <div class="shell">
                        <div class="container">
                            <div class="row">
                                @foreach ($packages as $package)
                                    <div class="col-md-4">
                                        <div class="wsk-cp-product">
                                            <div class="wsk-cp-img">
                                               
                                                <img src="{{ asset('images/real.jpg') }}" alt="Product"
                                                    class="img-responsive" />

                                            </div>
                                            <div class="wsk-cp-text">
                                                
                                                <div class="title-product">
                                                    <h3>Title</h3>
                                                </div>
                                                <div class="description-prod">

                                                    <div class="inside">
                                                        <div class="icon">
                                                        <i class="fa fa-circle" aria-hidden="true"></i>
                                                            <!-- <i class="fa fa-info-circle"aria-hidden="true"></i> -->
                                                        </div>
                                                        <div class="center"  >
                                                            <div style="overflow: scroll; height: 310px;">
                                                          <table id="myTable" class="table table-striped" >
                                                            <thead>
                                                                <tr>
                                                                  <th>Type</th>
                                                                  <th>Size</th>
                                                                  <th>Quantity</th>
                                                                  <th>Per File Downpayment</th>
                                                                  <th>Per File Rebate</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                              @foreach($package->packageDetail as $detail )
                                                                <tr>
                                                                    <td>{{$detail->unitType->name}}</td>
                                                                    <td>{{$detail->unitSize->name}} {{env('SIZE')}}</td>
                                                                    <td>{{$detail->unit_quantity}}</td>
                                                                    <td>{{$detail->dealer_downpayment}} pkr</td>
                                                                    <td>{{$detail->dealer_rebate}} pkr</td>
                                                                </tr>
                                                               
                                                             
                                                                @endforeach
                                                            </tbody>
                                                          </table>

                                                          <div class="wcf-left"><span class="price">Rebate Type: {{$package->rebate_type}}</span></div>
                                                    
                                                    @if($package->rebate_type =='cash')
                                                    <div class="wcf-left"><span class="price">Total Rebate Rs: {{$package->rebate_amount}}</span></div>
                                                    @endif
                                                            </div>
                                                            {{-- <table>
                                                                <tr>
                                                                    <th>Type</th>
                                                                    <th>Size</th>
                                                                    <th>Quantity</th>
                                                                    <th>Per File Downpayment</th>
                                                                    <th>Per File Rebate</th>
                                                                </tr>
                                                                @foreach($package->packageDetail as $detail )
                                                                <tr>
                                                                    <td>{{$detail->unitType->name}}</td>
                                                                    <td>{{$detail->unitSize->name}}</td>
                                                                    <td>{{$detail->unit_quantity}}</td>
                                                                    <td>{{$detail->dealer_downpayment}}</td>
                                                                    <td>{{$detail->dealer_rebate}}</td>
                                                                </tr>
                                                                @endforeach
                                                               
                                                            </table> --}}
                                                        </div>
                                                    </div>


                                                </div>
                                                <div class="card-footer">
                                                  <div class="category">
                                                    <span>{{ $package->name}}</span>
                                                </div>
                                                    <div class="wcf-left"><span class="price">Net Amount Rs: {{$package->total_price}}</span></div>
                                                    
                                                    {{-- <div class="wcf-right"><a href="{{route('openfile.package.receipt',$package->id)}}" class="buy-btn" ><i
                                                        class="zmdi zmdi-shopping-basket"></i></a></div>
                                                     --}}
                                                    <div class="wcf-right"><a href="#" class="buy-btn" onclick="openOptionbox('{{$package->id}}','{{$package->name}}')"><i
                                                                class="zmdi zmdi-shopping-basket"></i></a></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                @endforeach



                            </div>

                        </div>

                    </div>

                    {{-- End Packages --}}




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


        {{-- </form> --}}
    </div>

@stop

@section('js')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     

    <script>
     async function openOptionbox(val,name){
 

      await  Swal.fire({
  title: ``+name+` Package`,
   
  customClass: 'swal-wide',
  html: `Dealer: <select id='dealer' class='swal2-input' style='width: 60%;'>
    @foreach($dealers as $deal) 
    <option value='{{ $deal->id}}'>{{ $deal->name}}</option>
    @endforeach
    </select><br>
    @can('isSuperAdmin')
    Project: <select id='multipro_id' class='swal2-input' style='width: 60%;'>
    @foreach($multi_projects as $multi) 
    @php
 $v= encrypt($multi->id);
    @endphp
    <option value='{{$v}}'>{{ $multi->name}}</option>
    @endforeach
    </select><br>
    @endcan

  Date:<input id='date' class='swal2-input' type='date' style='width: 56%'>  
                                 
                                     


                                    

                       

                       

                       
                                 
  `,
  
  showCancelButton: true,
   
  preConfirm: () => {
 
   date=   document.getElementById('date').value;
   dealer=   document.getElementById('dealer').value;
   @can('isSuperAdmin')
   project=   document.getElementById('multipro_id').value;
   if (!project) {
                    Swal.showValidationMessage(
                        'You need to select Project!'
                    )
                }
   @endcan
   
                if (!date) {
                    Swal.showValidationMessage(
                        'You need to add date!'
                    )
                }
                if (!dealer) {
                    Swal.showValidationMessage(
                        'You need to select dealer!'
                    )
                }
               
                
                 
                                    
                                    
                                    

                 
    return [
     
      date,
      dealer,
      @can('isSuperAdmin')
      project,
      @endcan
     
    ]
  }
}).then((result) => {

  if (result.value) {
    $('.preloader').fadeIn();
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $.ajax({
                    
                    url: "{{ route('openfile.store') }}",
                   type: 'POST',                  
                    data: {
                       _token: CSRF_TOKEN,
                       
                        date:  result.value[0],
                       dealer: result.value[1],
                       @can('isSuperAdmin')
                       multipro_id: result.value[2],
                       @endcan
                       
                       package_id:val
                         },
                         dataType: 'JSON',
                         /* remind that 'data' is the response of the AjaxController */
                        success: function(data) {
                          $('.preloader').fadeOut();
                          Swal.fire({
  title: 'Poof! Data Added Successfully!',
  customClass: 'swal-wide',
  icon: "success",
  confirmButtonText: 'OK', 
}).then((result) => {

  if (result.isConfirmed) {
    window.location.href = '{{route("openfile.view")}}';
  }  
})
                          
                            },
                           
                            error: function(data){
                              $('.preloader').fadeOut();
                          Swal.fire("Ops! SomeThing went wrong!", {
                                                icon: "error",
                                                customClass: 'swal-wide',
                                            });

                                          
                            },
                        });

   

  //  console.log(`Amount: ${result.value[0]}, date: ${result.value[1]}, dealer: ${result.value[2]}`);
  }
});

//    const { value: inputs } = await  Swal.fire({
//   title: 'Select Dealer',
//   input: 'select',
//   customClass: 'swal-wide',
  
//   inputOptions: {
//     'Dealers': {
//     @foreach($dealers as $deal) 
//      {{ $deal->id}}:'{{ $deal->name}}',

//       @endforeach
     
//     },
    
//   },
//   inputPlaceholder: 'Select a Dealer',
//   showCancelButton: true,
//   html:
//     '<input id="swal-input1" class="swal2-input">' +
//     '<input id="swal-input2" class="swal2-input">',
//     focusConfirm: false,
//   preConfirm: () => {
//     return [
//       document.getElementById('swal-input1').value,
//       document.getElementById('swal-input2').value
//     ]
//   },

//   inputValidator: (value) => {
//     return new Promise((resolve) => {
//       if (value === '2') {
//         resolve()
//       } else {
//         resolve('You need to select oranges :)')
//       }
//     })
//   }
// })

// console.log('Inputs::',inputs);
// if (inputs) {
//   Swal.fire(`You selected: ${inputs}`)
// }
      }
        $(document).ready(function() {

            $('.js-example-basic-multiple').select2({
                placeholder: "Select a Unit"
            }).on('change', function(e) {
                var total_amount = 0;
                $.each($(this).find(":selected"), function(i, item) {
                    total_amount += $(item).data("amount");
                });
                $('#total_amount').val(total_amount);
            });
        });

        function changeFunc(a) {
            if (a == {{ \App\Receipt::cash }}) {
                $('#bank').css('display', 'none');
                $('#company-bank').css('display', 'none');
                $('#cheque').css('display', 'none');
                $('#adjustment').css('display', 'none');
                $('#cheque-dd-po-drawn-date').css('display', 'none');
                $('#cheque-dd-po-instrument-no').css('display', 'none');
                $('#merging_property').hide();
                $('#cheque-dd-po-roll-back').hide()
            } else if (a == {{ \App\Receipt::bank }}) {
                $('#bank').css('display', 'block');
                $('#company-bank').css('display', 'block');
                $('#cheque').css('display', 'none');
                $('#adjustment').css('display', 'none');
                $('#cheque-dd-po-drawn-date').css('display', 'block');
                $('#cheque-dd-po-instrument-no').css('display', 'block');
                $('#merging_property').hide();
                $('#cheque-dd-po-roll-back').hide()
            } else if (a == {{ \App\Receipt::cheque }}) {
                $('#bank').css('display', 'block');
                $('#company-bank').css('display', 'block');
                $('#cheque').css('display', 'none');
                $('#adjustment').css('display', 'none');
                $('#cheque-dd-po-drawn-date').css('display', 'block');
                $('#cheque-dd-po-instrument-no').css('display', 'block');
                $('#merging_property').hide();
                $('#cheque-dd-po-roll-back').hide()
            }  
            

        }
    </script>
@stop


@if ($errors->any())
    <script>
        window.onload = function() {

            updateProperty('{{ old('customer_id') }}');

            var payment_method = $('#payment_method').val();
            changeFunc(payment_method)
        }
    </script>
@endif