@extends('layouts/layout')
@section('title', 'Receipt Images')
@push('style')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
@endpush


@section('content')
@if ($message = Session::get('success'))
@include('sweetalert::alert')
@endif
<!-- page content -->
<div class="" role="main">
    <div class="">
        <div class="row">
            <div class="col-md-12 col-sm-12 mt-2">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>Receipt of Invoice Acknowledgement</h2>
                        <div class="clearfix"></div>
                    </div>
                    <div class="row">
                        @foreach($receipt_images as $receipt_images)
                        <!-- image show-->
                        @if(pathinfo($receipt_images->image_path, PATHINFO_EXTENSION) != "mp4")
                        <img src="{{ url('checkmate_images/'. $receipt_images->image_path) }}"
                            style="height: 200px; width: 250px;" class="m-2">
                        @else
                        <video autoplay="" loop="" controls="" width="250px" height="200px" class="m-2">
                            <source type="video/mp4" src="{{ url('checkmate_images/'. $receipt_images->image_path) }}">
                        </video>
                        @endif
                        <!-- image end -->
                        @endforeach
                    </div>
                    <div class="row">
                        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center mt-3">
                            <div class="form-group">
                                <a href="javascript:history.back()" class="btn btn-primary btn-round">Back</a>
                                <!-- <input type="submit" class="btn btn-success mx-1" name="create_product" id="create_product" value="Update Campaign"  style="margin-top: 10px;"/> -->
                                <input type="hidden" id="trainingid" name="trainingid" class="form-control"
                                    value="{{$id}}">
                                <button type="button" id="training_view" name="training_view"
                                    class="btn btn-primary btn-round" data-toggle="modal"
                                    data-target="#exampleModal">Remarks
                                </button>
                            </div>
                        </div>
                    </div>
                    <!-- use modal  -->
                    <!-- Modal -->
                    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">Remarks</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <table id="datatable-fixed-header tblfirst"
                                        class="table table-striped table-bordered text-center" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Invoice No</th>
                                                <th>Remark</th>
                                                <th>Remark By</th>
                                                <th>Date</th>
                                            </tr>
                                        </thead>
                                        <tbody id="myTable" name="Table">

                                        </tbody>
                                    </table>
                                    <div class="row">
                                        <div class="col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
                                            <div class="form-group">
                                                <label class="mb-1">Status</label>
                                                <select class="select2 form-control" name="status" id="status"
                                                    data-toggle="select2">

                                                    <option value="Paid">Paid</option>
                                                    <option value="Unpaid">Unpaid</option>
                                                </select>
                                                <span id="status_error" class="text-danger d-inline-block"></span>
                                            </div>
                                        </div>
                                    </div>

                                    <label class="form-control-label mb-1">Admin Remark</label>
                                    <input type="text" id="remark" name="remark" required="required"
                                        class="form-control" style="height:30px" value="">
                                    <span id="remark_error" class="validate"></span>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-round btn-secondary"
                                        data-dismiss="modal">Close</button>
                                    <button id="update_status" data-dismiss="modal"
                                        class="btn btn-round btn-primary remarkupdate scrollToTop"
                                        type="button">Update</button>

                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end modal -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<script>
$(document).ready(function() {
    $("#update_status").on('click', function() {
        var error_msg = "";

        if ($("#remark").val() == "") {
            $("#remark_error").text("Please enter remark.");
            error_msg = "Error";
        } else {
            $("#module_name_error").text("");
        }

        if (error_msg) {
            return false;
        }
    });

});
</script>
<script>
function timeFunctionLong(input) {
    setTimeout(function() {
        input.type = 'text';
    }, 60000);
}
</script>
<script>
$(document).ready(function() {
    $(document).on('click', '.remarkupdate', function() {
        var training_id = $('#trainingid').val();
        var remark = $('#remark').val();
        var status = $('#status').val();
        console.log(training_id);
        $.ajax({
            url: "{{url('updatereceiptremark')}}",
            type: "POST",
            data: {
                training_id: training_id,
                remark: remark,
                status: status,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
                swal({
                        title: "Success!",
                        text: "Your Remark Updated Successfully.",
                        type: "success"
                    },
                    function() {
                        location.reload();
                    });
            }
        });
    });
});
</script>

<script>
$(document).ready(function() {
    $(document).on('click', '#training_view', function() {
        $("#myTable tr").detach();

        var training_id = $('#trainingid').val();
        console.log(training_id);
        $.ajax({
            url: "{{url('viewrreceiptemarks')}}",
            type: "POST",
            data: {
                training_id: training_id,
                _token: '{{csrf_token()}}'
            },
            dataType: 'json',
            success: function(res) {
                console.log(res);
                $.each(res, function(key, val) {
                    $("#myTable").append('<tr' +
                        '<td>' + val.remark_id + '</td>' +
                        '<td>' + val.invoice_no + '</td>' +
                        '<td>' + val.remark + '</td>' +
                        '<td>' + val.Trainer + '</td>' +
                        '<td>' + val.created_at + '</td>' +
                        '</tr>');
                });
                $.each(res, function(key, value) {
                    $('#status').html('<option value="' + value
                        .invoice_status + '" selected>' + value.invoice_status +
                        '</option>');
                    $("#status").append('<option value="Paid">Paid</option>');
                    $("#status").append('<option value="Unpaid">Unpaid</option>');
                });
            }
        });
    });
});
</script>
@endpush