@extends('backend.layouts.app')
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script>
    $('document').ready(function(){
        $table = $('#example').DataTable({
            dom: 'Blfrtip',
        });
    });
</script>

@section('content')

<div class="col-xl-12">
	<div class="breadcrumb-holder">
		<h5 style="text-align: center"> Swimming Pool Registration </h5>
		    <a href="{{route('swimming-pool')}}" style="color: #000000; border: 1px solid #eee; width: 60%; margin: 15px auto; box-shadow: 0px 0px 5px 5px #9e9c9c;">
                <i class="fa fa-home" aria-hidden="true" style="font-size: 20px; "></i>
                {{-- <img src="{{ url('public/backend/images/icons/admission.png') }}" style="width: 20px"> --}}
                    Swimming Dashboard
            </a>
		<ol class="breadcrumb float-right">
		</ol>
		<div class="clearfix"></div>
	</div>
</div>
<div class="container-fluid">
	<div class="col-md-12">
		<div style="text-align: right; margin-bottom: 20px;">

        </div>
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Swimming Registration for Guest</h3>
                <div class="btn-group">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#create"><i class="fa fa-fw fa-plus-square"></i></button>
                </div>
            </div>
            <div class="card-body">		
                <table class="table table-striped table-bordered" id="example">
                    <thead>
                        <tr>
                            <th>Sl</th>
                            <th>Name</th>
                            <th>Locker No</th>
                            <th>Phone</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                        <!-- <tr class="filte">
                            <th>Sl</th>
                            <th>Name(IT)</th>
                            <th>Name(EN)</th>
                            <th>Available Day</th>
                            <th>Image</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr> -->
                    </thead>
                    <tbody>
                        @if(sizeof($model) > 0)
                        @foreach($model as $m)
                        <tr>
                            <td>{{ ++$sl }}</td>
                            <td>{{ $m->name }}</td>
                            <td>{{ $m->swimmingHistory->locker }}</td>
                            <td>{{ $m->phone }}</td>
                            <td>{{ $m->swimmingDetails->sum('total') }}</td>
                            <td>
                            <a class="btn btn-success" data-toggle="modal" data-target="#edit" data-target-id = "{{$m->id}}" 
                                data-reg = "{{ $m }}"   data-history = "{{ $m->swimmingHistory }}"  data-details = "{{ $m->swimmingDetails }}">
                                <i class="fa fa-fw fa-edit"></i>
                            </a>
                                <a class="btn btn-danger" data-toggle="modal" data-target="#delete" data-target-id = "{{$m->id}}" >
                                    <i class="fa fa-fw fa-trash"></i>
                                </a>
                            </td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                </table>			
            </div>
        </div>			
	</div>
</div>
<div class="modal fade" id="create">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <form id="store" action="{{ route('swimming-pool-guest-reg.store') }}" method="post" enctype="multipart/form-data">@csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="form-control" value="{{ old('name') }}" name="name" placeholder="Guest Name" autocomplete="off" required>
                                    @if ($errors->has('name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Type</label>
                                    <select class="form-control select2" name="type" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Type</option>
                                        <option value="1" @if( old('category_id')==1 ) selected @endif )>Defence</option>
                                        <option value="2" @if( old('category_id')==2 ) selected @endif>Civil</option>
                                    </select>
                                    @if ($errors->has('type'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('type') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text" class="form-control" value="{{ old('phone') }}" name="phone" placeholder="Phone No." autocomplete="off" required>
                                    @if ($errors->has('phone'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('phone') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>S. Department</label>
                                    <select class="form-control select2" name="s_id" style="width: 100%;" required>
                                    <option value="" selected="selected">Select Category</option>
                                    @if(sizeof($s_deparment) > 0)
                                    @foreach($s_deparment as $s_id)
                                        <option value="{{ $s_id->id }}" @if( old('s_id') == $s_id->id ) selected @endif )> {{ $s_id->department_type }} </option>
                                    @endforeach
                                    @endif
                                    </select>
                                    @if ($errors->has('s_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('s_id') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Locker</label>
                                    <input type="text" class="form-control" value="{{ old('locker_no') }}" name="locker_no" placeholder="Locker No." autocomplete="off" required>
                                    @if ($errors->has('locker_no'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('locker_no') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Payment Method</label>
                                    <select class="form-control select2" name="p_method" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Payment Method</option>
                                        @if(sizeof($p_method) > 0)
                                        @foreach($p_method as $p_id)
                                        <option value="{{ $p_id->id }}" @if( old('p_method')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    @if ($errors->has('p_method'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('p_method') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Service Name</label>
                                    <select class="form-control select2" name="swimming_service" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Service Name</option>
                                    </select>
                                    @if ($errors->has('swimming_service'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('swimming_service') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Price</label>
                                    <input type="text" class="form-control" value="{{ old('price') }}" name="price" placeholder="Price" autocomplete="off" required>
                                    @if ($errors->has('price'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('price') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Total</label>
                                    <input type="text" class="form-control" value="{{ old('total') }}" name="total" placeholder="Total" autocomplete="off" required>
                                    @if ($errors->has('total'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('total') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                          <button type="button" style="float:right;" class="btn btn-success" id="addBtn">Add</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-body">
                            <table class="table table-bordered table-striped serviceTable">
                                <thead>
                                    <tr>
                                        <th>Service Name</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>	
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                       <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="edit">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <form id="editForm" action="#" method="post" enctype="multipart/form-data">@csrf
            @method('put')
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Name</label>
                                    <input type="text" class="form-control" value="{{ old('name') }}" name="name" placeholder="Guest Name" autocomplete="off" required>
                                    @if ($errors->has('name'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Type</label>
                                    <select class="form-control select2" name="type" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Type</option>
                                        <option value="1" @if( old('category_id')==1 ) selected @endif )>Defence</option>
                                        <option value="2" @if( old('category_id')==2 ) selected @endif>Non Defence</option>
                                    </select>
                                    @if ($errors->has('type'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('type') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Phone</label>
                                    <input type="text" class="form-control" value="{{ old('phone') }}" name="phone" placeholder="Phone No." autocomplete="off" required>
                                    @if ($errors->has('phone'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('phone') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>S. Department</label>
                                    <select class="form-control select2" name="s_id" style="width: 100%;" required>
                                    <option value="" selected="selected">Select Category</option>
                                    @if(sizeof($s_deparment) > 0)
                                    @foreach($s_deparment as $s_id)
                                        <option value="{{ $s_id->id }}" @if( old('s_id') == $s_id->id ) selected @endif )> {{ $s_id->department_type }} </option>
                                    @endforeach
                                    @endif
                                    </select>
                                    @if ($errors->has('s_id'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('s_id') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Locker</label>
                                    <input type="text" class="form-control" value="{{ old('locker_no') }}" name="locker_no" placeholder="Locker No." autocomplete="off" required>
                                    @if ($errors->has('locker_no'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('locker_no') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Payment Method</label>
                                    <select class="form-control select2" name="p_method" style="width: 100%;" required>
                                        <option value="" selected="selected">Select Payment Method</option>
                                        @if(sizeof($p_method) > 0)
                                        @foreach($p_method as $p_id)
                                        <option value="{{ $p_id->id }}" @if( old('p_method')== $p_id->id ) selected @endif )>{{ $p_id->name }}</option>
                                        @endforeach
                                        @endif
                                    </select>
                                    @if ($errors->has('p_method'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('p_method') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Service Name</label>
                                    <select class="form-control select2" name="swimming_service" style="width: 100%;">
                                        <option value="" selected="selected">Select Service Name</option>
                                    </select>
                                    @if ($errors->has('swimming_service'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('swimming_service') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Price</label>
                                    <input type="text" class="form-control" value="{{ old('price') }}" name="price" placeholder="Price" autocomplete="off">
                                    @if ($errors->has('price'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('price') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="box-body">
                                <div class="form-group">
                                    <label>Total</label>
                                    <input type="text" class="form-control" value="{{ old('total') }}" name="total" placeholder="Total" autocomplete="off" >
                                    @if ($errors->has('total'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('total') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div>
                            <button type="button" style="float:right;" class="btn btn-success" id="addEditBtn">Add</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="box-body">
                            <table class="table table-bordered table-striped serviceTable">
                                <thead>
                                    <tr>
                                        <th>Service Name</th>
                                        <th>Price</th>
                                        <th>Total</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>	
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                        <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<input type="hidden" id="modalValue" value="{{ Session::get('modal') }}">
@endsection

@section('modal_content')

@endsection
@section('page_script')>
<script>
  $('document').ready(function(){
    var err = $('#modalValue').val();
    $('#create').modal({ 'show' : err =="create" ? true : false });
    $('#edit').modal({ 'show' : err =="edit" ? true : false });
  });
</script>
<script>

    $('document').ready(function(){
        $("#create").on("show.bs.modal", function(e) { 
            $("table.serviceTable tbody").empty();
            $('.modal-body select[name="s_id"]').change(function(){
                var id = $(this).val();
                $.ajax({
                    type: 'get',
                    url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseService',
                    data:{
                        'id':id,
                    },
                    success:function(data){
                        $('select[name="swimming_service"]').empty();
                        if(data.length > 0){
                            var output = '<option value="" selected="selected">Select Service Name</option>';
                            $.each(data,function(i,e){
                                output += '<option value="'+e.id+'">'+e.service_name+'</option>';
                            });
                            $('select[name="swimming_service"]').append(output);
                        }
                    },
                    error:function(data){
                        console.log(data);
                    },
                });
            });
            $('.modal-body #addBtn').click(function(){
                var service_id_arr =  $('.modal-body select[name="swimming_service"]').trigger('selected').val();
                var service_text =  $('.modal-body select[name="swimming_service"]').find(":selected").text();
                var price_arr = $('.modal-body input[name="price"]').val();
                var total_arry = $('.modal-body input[name="total"]').val();
                console.log(total_arry);
                if((service_id_arr != '') && (price_arr != '') && (total_arry != '')){
                    var showcaseTable = $('table .swimmingGuestData').closest("tr");
                    var checkInsertData = 1;
                    // $.each(showcaseTable,function(e){
                    //     var checkCode = $(this).find('#tb_code').text();
                    //     if(checkCode == data.model.code){
                    //         checkInsertData = 0;
                    //         return false;
                    //     }else{
                    //         checkInsertData = 1;
                    //     }
                    // });
                    if(checkInsertData == 1){
                        var newRow = $("<tr class='swimmingGuestData'>");
                        var col = '';
                            col +='<td id="tb_code"><input type="hidden" name="service_id_arr[]" value="'+service_id_arr+'">'+service_text+'</td>';
                            col +='<td id="tb_code"><input type="hidden" name="price_arr[]" value="'+price_arr+'">'+price_arr+'</td>';
                            col +='<td><input type="hidden" name="total_arry[]" value="'+total_arry+'">'+total_arry+'</td>';
                            col +='<td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>';
                            console.log(col);
                        newRow.append(col);
                        $("table.serviceTable tbody").append(newRow);
                    }
                    $('.deleteSwmming').click(function(){
                        $(this).closest('tr').remove();
                    });
                }
            });
        });
        $("#edit").on("show.bs.modal", function(e) { 
            $("table.serviceTable tbody").empty();
            var id = $(e.relatedTarget).data('target-id');
            var reg = $(e.relatedTarget).data('reg'); 
            var history = $(e.relatedTarget).data('history'); 
            var details = $(e.relatedTarget).data('details'); 
            $('.modal-body input[name="name"]').val(reg.name);
            $('.modal-body select[name="type"]').val(reg.type).change();
            $('.modal-body input[name="phone"]').val(reg.phone);

            $('.modal-body select[name="s_id"]').val(history.service_dep).trigger('change');
            $('.modal-body input[name="locker_no"]').val(history.locker);
            $('.modal-body select[name="p_method"]').val(history.payment_method).trigger('change');
            serviceDepartment(history.service_dep);
            $('.modal-body select[name="s_id"]').change(function(){
                var id = $(this).val();
                serviceDepartment(id);
            });
            if(details.length > 0){
                $.each(details,function(i,x){
                    var newRow = $("<tr class='swimmingGuestData'>");
                    getServiceName(x.service_id);
                    var selectedText = localStorage.getItem('resultgetServiceName');
                    var col = '';
                        col +='<td id="tb_code"><input type="hidden" name="service_id_arr[]" value="'+x.service_id+'">'+selectedText+'</td>';
                        col +='<td id="tb_code"><input type="hidden" name="price_arr[]" value="'+x.price+'">'+x.price+'</td>';
                        col +='<td><input type="hidden" name="total_arry[]" value="'+x.total+'">'+x.total+'</td>';
                        col +='<td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>';
                    newRow.append(col);
                    $("table.serviceTable tbody").append(newRow);
                });
            }
            $('.modal-body #addEditBtn').click(function(){
                var service_id_arr =  $('#edit .modal-body select[name="swimming_service"]').trigger('selected').val();
                var service_text =  $('#edit .modal-body select[name="swimming_service"]').find(":selected").text();
                var price_arr = $('#edit .modal-body input[name="price"]').val();
                var total_arry = $('#edit .modal-body input[name="total"]').val();
                if((service_id_arr != '') && (price_arr != '') && (total_arry != '')){
                    var showcaseTable = $('table .swimmingGuestData').closest("tr");
                    var checkInsertData = 1;
                    // $.each(showcaseTable,function(e){
                    //     var checkCode = $(this).find('#tb_code').text();
                    //     if(checkCode == data.model.code){
                    //         checkInsertData = 0;
                    //         return false;
                    //     }else{
                    //         checkInsertData = 1;
                    //     }
                    // });
                    if(checkInsertData == 1){
                        var newRow = $("<tr class='swimmingGuestData'>");
                        var col = '';
                            col +='<td id="tb_code"><input type="hidden" name="service_id_arr[]" value="'+service_id_arr+'">'+service_text+'</td>';
                            col +='<td id="tb_code"><input type="hidden" name="price_arr[]" value="'+price_arr+'">'+price_arr+'</td>';
                            col +='<td><input type="hidden" name="total_arry[]" value="'+total_arry+'">'+total_arry+'</td>';
                            col +='<td><a href="javascript:;" class="deleteSwmming"><i class="fa fa-trash"></i></a></td>';
                            console.log(col);
                        newRow.append(col);
                        $("table.serviceTable tbody").append(newRow);
                    }
                    $('.deleteSwmming').click(function(){
                        $(this).closest('tr').remove();
                    });
                }
            });
            $('.deleteSwmming').click(function(){
                $(this).closest('tr').remove();
            });

            $('#editForm').attr('action',$('#mainUrlSwmiimg').val()+'/swimming-pool-guest-reg/'+id); 
        });
    });
    function serviceDepartment(id){
        $.ajax({
            type: 'get',
            url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseService',
            data:{
                'id':id,
            },
            success:function(data){
                $('select[name="swimming_service"]').empty();
                if(data.length > 0){
                    var output = '<option value="" selected="selected">Select Service Name</option>';
                    $.each(data,function(i,e){
                        output += '<option value="'+e.id+'">'+e.service_name+'</option>';
                    });
                    $('.modal-body select[name="swimming_service"]').html(output);
                }
            },
            error:function(data){
                console.log(data);
            },
        });
    }
    function getServiceName(id){
        $.ajax({
            type: 'get',
            url: $('#mainUrlSwmiimg').val()+'/getserviceDepartmentWiseServiceName',
            data:{
                'id':id,
            },
            success:function(data){
                localStorage.setItem('resultgetServiceName',data.service_name);
            },
            error:function(data){
                console.log(data);
            },
        });
    }
</script>

@endsection