@extends('layouts.app')

@section('content')
<div class="col-12">

</div>

<div class="col-12">

    <div class="card">
        <div class="card-header">
            <h5 class="title mb-0">Deployment Information</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb"style="background-color: white; padding-left: 2px">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('deployment', [ 'id' =>$did ]) }}">Deployments</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $deployment->ddo_number }}</li>
                </ol>
            </nav>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">POST</small>
                            <p>{{ $deployment->branch_name }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">DAY RATE</small>
                            <p>₱{{ $deployment->day_rate }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">NIGHT RATE</small>
                            <p>₱{{ $deployment->night_rate }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border">
                        <div class="card-body">
                            <small class="text-secondary">DURATION</small>
                            <p>{{ $deployment->deployment_start_date }} to {{ $deployment->deployment_end_date }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-100 text-right">
                <div class="d-flex flex-row-reverse">
                    {{-- <a href="{{ route('ddo.calendar', [ 'id' =>$did, 'did' => $did ]) }}" class="btn btn-primary btn-sm text-white">CALENDAR VIEW</a> --}}



                    <div class="dropdown ml-auto " style="width: 100px">

                        <button class="btn btn-sm btn-primary  ml-auto" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="font-size: 14px !important">
                            <i class="now-ui-icons loader_gear"></i>
                        </button>
                        <div class="dropdown-menu  dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                            <a href="{{ route('ddo.create', [ 'id' => $did ]) }}" class="dropdown-item">Add DDO</a>
                            @if(!$deployment->renew_id)
                                <a href="{{ route('ddo.renew', [ 'id' => $did ]) }}" class=" btnRenew dropdown-item">Renew</a>
                            @else
                                <a href="{{ route('ddo', [ 'id' => $deployment->renew_id ]) }}" class="  btnRenew dropdown-item">Renewed</a>
                            @endif
                            <button class="dropdown-item btnReport">Payment Period Report</button>
                            <a class="dropdown-item" href="{{ route('ddo.print', [ 'id' => $did ]) }}">DDO Report</a>
                            @if(count($ddos) < 1)
                            <a class="dropdown-item" href="#" id="btnDeleteDeployment">Delete</a>
                            @endif
                        </div>
                    </div>

                </div>
                <form id="frmSearch" class="navbar-search" action="{{ route('ddo.search', [ 'id' => $did ]) }}">
                    <div class="input-group no-border">
                        <input type="text" name="keyword" @if(isset($keyword)) value="{{ $keyword }}" @endif class="form-control" placeholder="Search using name..." autocomplete="off">
                        <div class="input-group-append">
                        <button type="submit" class="txtSearch input-group-text">
                            <i class="now-ui-icons ui-1_zoom-bold"></i>
                        </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="table-responsive">

                <table class="table">
                    <thead class=" text-primary">
                        <tr>
                            <th>Personnel</th>
                            <th>Status</th>
                            {{-- <th>From</th>
                            <th>To</th> --}}
                            <th>Time-in</th>
                            <th>Time-out</th>
                            <th>Rate Type</th>
                            <th>Firearm</th>
                            <th>Ammo</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($ddos as $ddo)
                            <tr id="generalTR{{ $ddo->id }}">
                                <td>{{ $ddo->last_name . ', ' . $ddo->first_name }} </td>
                                <td>{{ $ddo->status }} </td>
                                {{-- <td>{{ $ddo->from_date }} </td>
                                <td>{{ $ddo->to_date }} </td> --}}
                                <td>{{ $ddo->time_in }} </td>
                                <td>{{ $ddo->time_out }} </td>
                                @if($ddo->isDayRate)
                                    <td>Day Rate</td>
                                @else
                                    <td>Night Rate</td>
                                @endif
                                <td>({{ $ddo->serial_number }}) {{ $ddo->make }} {{ $ddo->caliber }} {{ $ddo->kind }} {{ $ddo->model }}</td>
                                <td>{{ $ddo->ammo }} </td>
                                <td>
                                    @if($deployment->renew_id)
                                        @if(!$ddo->renew_id)
                                            <a href="{{ route('ddo.renewpersonnel', [ 'id' =>$did, $ddo->id ]) }}" type="button" class="px-1 btn btn-warning btn-link btn-sm btnEdits" ><i class="fa fa-file"></i> </a>
                                        @else
                                        <button type="button" class="px-1 btn btn-success btn-link btn-sm" disabled><i class="fa fa-check"></i> </button>
                                        @endif
                                    @endif
                                    <a href="{{ route('ddo.edit', [ 'id' =>$did, $ddo->id ]) }}" type="button" class="px-1 btn btn-warning btn-link btn-sm btnEdits" ><i class="fa fa-edit"></i> </a>
                                    <button type="button" class="px-1 btn btn-danger btn-link btn-sm btnDelete" id="dl{{ $ddo->id }}"><i class="fa fa-trash"></i> </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="card-footer pl-2">
                <p class="text-secondary">Showing {{ count($ddos) }} of {{ $ddos->appends(request()->input())->total() }} entries</p>
                {{ $ddos->appends(request()->input())->links() }}
            </div>
        </div>

  </div>

<div class="modal" tabindex="-1" role="dialog" id="mdlDelConfirmation">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <h5 class="modal-title">CONFIRMATION</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-secondary">
            <p>Are you sure you want to delete this DDO and all the DTR records that belongs to this DDO?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
          <button type="button" class="btn btn-danger ml-3" id="confirmDelete">DELETE</button>
        </div>
      </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="mdlDeploymentDelConfirmation">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger">
          <h5 class="modal-title">CONFIRMATION</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body text-secondary">
            <p>Are you sure you want to delete this deployment record?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
          <button type="button" class="btn btn-danger ml-3" id="confirmDeleteDeployment">DELETE</button>
        </div>
      </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="mdlDelSuccess">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header bg-success pb-0">
            <h5 class="text-white">SUCCESS!</h5>
        </div>
        <div class="modal-body text-secondary">
          <p>Deployment was deleted successfully.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-success" id="btnContinue">Continue</button>
        </div>
      </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="mdlReports">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Choose Payment Period</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body text-secondary">
            <div class="col-12">
                <div class="form-group">
                    <label>Payment Period</label>
                    <select type="text" class="form-control js-example-basic-single @if ($errors->has('paymentperiod')) is-invalid @endif" placeholder="required" name="paymentperiod" value="{{ old('paymentperiod') }}" id="txtPaymentPeriod">
                        @foreach($paymentperiod as $pp)
                            <option value="{{ $pp->id }}">{{ $pp->start_date . ' to ' . $pp->end_date }}</option>
                        @endforeach
                    </select>
                    @if ($errors->has('paymentperiod'))
                        <div class="invalid-feedback">
                            <strong>{{ $errors->first('paymentperiod') }}</strong>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">CANCEL</button>
            <button type="button" class="btn btn-success ml-3 btnGoToReport" id="confirmDelete">CONFIRM</button>
        </div>
        </div>
    </div>
</div>
@endsection
@section('script')
    <script>
        notif = {
            misc: {
            navbar_menu_visible: 0
            },

            showNotification: function(from, align, color, msg) {

            $.notify({
                icon: "now-ui-icons ui-1_bell-53",
                message: msg

            }, {
                type: color,
                timer: 8000,
                placement: {
                from: from,
                align: align
                }
            });
            }
        };

        @if(session()->has('message.level'))
            notif.showNotification('top','right', '{{ session('message.level') }}', '{{ session('message.content') }}')
        @endif

        let deletingIndex = 0;
        $('.btnDelete').click(function() {
            $('#mdlDelConfirmation').modal('show')
            let index = $(this).attr("id");
            deletingIndex = index.substr(2);
        })

        $('#btnDeleteDeployment').click(function() {
            $('#mdlDeploymentDelConfirmation').modal('show')
        })



        $('#confirmDelete').click(function() {
            loader();
            $.ajax({
                url : '{{ route( 'ddo.destroy' ) }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': deletingIndex,
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    if(result.code == 200) {
                        $('#mdlDelConfirmation').modal('hide');
                        $('#generalTR' + deletingIndex).remove();
                        notif.showNotification('top','right', 'success', 'DDO and all its DTR records was deleted successfully')
                    } else {
                        notif.showNotification('top','right', 'danger', 'Something went wrong. DTR entry was NOT deleted')
                    }
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Something went wrong')
                }
            });
        })

        $('.btnReport').click(function() {
            $('#mdlReports').modal('show')
        })

        $('.btnGoToReport').click(function() {
            var url =  "{{ route('ddo.report', [ 'id' => $did, 'pp' => 'pp' ]) }}"
            url = url.replace('pp', $('#txtPaymentPeriod').val());
            window.location.href = url
        })

        $('#confirmDeleteDeployment').click(function() {
            loader();
            $.ajax({
                url : '{{ route( 'deployment.destroy' ) }}',
                data: {
                    '_token': '{{ csrf_token() }}',
                    'id': {{ $did }},
                },
                type: 'post',
                dataType: 'json',
                success: function( result )
                {
                    if(result.code == 200) {
                        $('#mdlDeploymentDelConfirmation').modal('hide')
                            unloader();
                        $('#mdlDelSuccess').modal('show')
                    } else {
                        notif.showNotification('top','right', 'danger', 'Something went wrong. DTR entry was NOT deleted')
                    }
                    unloader();
                },
                error: function()
                {
                    notif.showNotification('top','right', 'danger', 'Something went wrong')
                }
            });
        })

        $('#btnContinue').click(function() {
            window.location.href = "{{ route('deployment')}}";
        });

    </script>
@endsection