@extends('layouts.appuser')




@section('dynamic_css')
    <style>

        .modal-backdrop{
            display: contents;
        }
        @media (max-width: 768px)
        {

        }

    </style>
@endsection
@section('content')
    <div class="container ">
       <div class="row">

           <div class="col-md-12 mt-5">




               <!-- Table with panel -->
               <div class="card card-cascade narrower" >

                   <!--Card image-->
                   <div class="view view-cascade gradient-card-header blue-gradient narrower py-2 mx-4 mb-3 d-flex justify-content-between align-items-center" style="margin-top: -25px;">

                       <div>

                       </div>

                       <a  class="white-text mx-3" style="font-size:23px;"><i class="fa fa-plane fa-lg pr10"></i>Travel</a>

                       <div>
                           <button type="button" class="btn btn-outline-info btn-rounded waves-effect" data-toggle="modal" data-target="#myModal" style="left: -8px;border-color: white !important;color: white !important;">
                               <i class="fa fa-pencil mt-0">  Create Tour</i>
                           </button>

                       </div>

                   </div>
                   <!--/Card image-->

                   <div class="px-4">

                       <div class="table-wrapper">
                           <!--Table-->
                           <table class="table table-hover mb-0 tour_table">

                               <!--Table head-->
                               <thead>
                               <tr>

                                   <th class="th-lg" style="text-align: center">
                                       <a>Tour Title</a>
                                   </th>
                                   <th class="th-lg" style="text-align: center">
                                       <a href="">Order No
                                       </a>
                                   </th>
                                   <th class="th-lg" style="text-align: center">
                                       <a href="">Action

                                       </a>
                                   </th>

                               </tr>
                               </thead>
                               <!--Table head-->

                               <!--Table body-->
                               <tbody>
                               @foreach($tour_details as $tour_detail)
                                   <tr>
                                       <td>{{$tour_detail->tour_title}}</td>
                                       <td>{{$tour_detail->order_no}}</td>

                                       @if($tour_detail->status==0)
                                           <td><a href="{{url('user/travel/details/'.Crypt::encrypt($tour_detail->id))}}" class="btn blue-gradient btn-sm" style="color: white"><i class="fa fa-eye" aria-hidden="true"></i>View</a></td>

                                       @endif
                                       @if($tour_detail->status==1)

                                           <td>
                                               <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                                                   <div class="btn-group mr-2" role="group" aria-label="First group">
                                                       <a href="{{url('user/travel/travel-order-copy/pdf/'.$tour_detail->id)}}" class="btn btn-default btn-sm"><i class="fa fa-download" aria-hidden="true"></i> Office order</a>
                                                       <a href="{{url('user/travel/travel-tour-dairy/pdf/'.$tour_detail->id)}}" class="btn btn-default btn-sm"><i class="fa fa-download" aria-hidden="true"></i> Tour Dairy</a>
                                                       <a href="{{url('user/travel/travel-bill/pdf/'.$tour_detail->id)}}" class="btn btn-default btn-sm"><i class="fa fa-download" aria-hidden="true"></i> Travel Bill</a>
                                                   </div>



                                           </td>
                                       @endif

                                   </tr>


                               @endforeach
                               </tbody>
                               <!--Table body-->
                           </table>
                           <!--Table-->
                       </div>

                   </div>

               </div>
               <!-- Table with panel -->

           </div>

       </div>
    </div>







@endsection
{{--create tour model--}}
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Create Tour</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <form id="create_tour" method="post">
            <div class="modal-body">
                <div id="error">

                </div>

                    {{csrf_field()}}
                    <div class="row">



                    <div class="col-md-6 form-group">
                        <label>Start Date*</label>
                        <input type="date" class="form-control" name="tour_start_date" required>

                    </div>
                    <div class="form-group col-md-6">
                        <label>End Date*</label>
                        <input type="date" class="form-control" name="tour_end_date" required>

                    </div>
                        <div class="form-group col-md-6">
                            <label>Order No*</label>

                            <input type="text" class="form-control" name="tour_order_no" placeholder="Order No" required>

                        </div>
                    <div class="form-group col-md-6">
                        <label>Order Copy*</label>
                        <input type="file" class="form-control" name="tour_order_copy" required>

                    </div>
                    <div class="form-group col-md-12">
                        <label>Tour Title*</label>
                        <input type="text" class="form-control" name="tour_title" placeholder="Tour title" required>


                    </div>

                    <div class="form-group col-md-12">
                        <label>Tour Description</label>
                        <textarea class="form-control" placeholder="Tour Description" name="tour_description"></textarea>

                    </div>


                    </div>


            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <input type="submit" class="btn btn-primary btn-sm" name="submit" value="Create">
                <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Close</button>
            </div>
            </form>

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


@section('dynamic_js')
    <script>
    $('#create_tour').on('submit',function (e) {
    e.preventDefault();
        $('#error').empty();

    $('.page-loader-wrapper').fadeIn();
    $.ajax({
    type: "POST",
    url: "{{route('createTour')}}",
    dataType: 'json',
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData: false,
    success: function (data) {

    $('.page-loader-wrapper').fadeOut();

        if(data.msg=="validationFails"){

            $.each(data.data, function (index, value) {
                $('#error').append('<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button><strong>Warning!</strong>'+value+'</div>');
            });
        }
        if(data.msg=="success"){
            $('#myModal').hide();
            var trHTML = '';
            $.each(data.data, function (i, item) {


                trHTML += '<tr><td>' + item.tour_title + '</td><td>'+item.order_no+'</td><td><a href="{{url('user/travel/details/')}}/'+item.id+'" class="btn blue-gradient btn-sm" style="color:white"><i class="fa fa-eye" aria-hidden="true"></i>View</a></td></tr>';
            });
            $('.tour_table').prepend(trHTML);
            swal("Success!", "Tour Created Successfully!", "success");





        }

    },
    error: function (jqXHR, textStatus, errorThrown) {


    }
    });
    });
    </script>

@endsection