@extends('layouts/layout')
@section('title', 'Invoices')
@push('style')
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

<style>
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 100% !important;
    padding: 0 !important;
}

.x_title h2 {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #73879C !important;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <!-- frist tab -->
                        <div class="card">
                            <div class="card-body">
                                <div class="x_title bold">
                                    <h2 style="font-weight: bold">Customer Code : {{$billing[0]->invoiceno}}</h2>
                                    <h2 class="float-right " style="font-weight: bold">{{$billing[0]->invoiceunitname}}
                                    </h2>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 col-sm-6 ">
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice No :</b>
                                            {{$billing[0]->invoiceno}}
                                        </div>
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Type :</b>
                                            {{$billing[0]->invoicetype}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Date:</b>
                                            {{$billing[0]->invoicedate}}
                                        </div>
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary">Invoice Month:</b>
                                            {{$billing[0]->invoicemonth}}
                                        </div>
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Unit :</b>
                                            {{$billing[0]->invoiceunit}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoiceunit Name :</b>
                                            {{$billing[0]->invoiceunitname}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoiceunit Branch :</b>
                                            {{$billing[0]->invoiceunitbranch}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Status: </b>
                                            {{$billing[0]->status}}
                                        </div>
                                    </div>

                                    <div class="col-md-6 col-sm-6 ">
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Unit Location :</b>
                                            {{$billing[0]->invoiceunitlocation}}
                                        </div>
                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Amount :</b>
                                            {{$billing[0]->invoiceamount}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Invoice Paid Amount :</b>
                                            {{$billing[0]->invoicepaidamount}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Payment Date:</b>
                                            {{$billing[0]->paymentdate}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Payment Method :</b>
                                            {{$billing[0]->paymentmethod}}
                                        </div>

                                        <div class="mb-2 text-dark">
                                            <b class="text-primary"> Payment Challan No :</b>
                                            {{$billing[0]->paymentchallanno}}
                                        </div>

                                        <div class="mb-2 text-dark"> <b class="text-primary">Payment Challan Bank : </b>
                                            {{$billing[0]->paymentchallanbank}}
                                        </div>

                                        <div class="mb-2 text-dark"> <b class="text-primary">Payment Challan Bank : </b>
                                            {{$billing[0]->paymentchallanbank}}
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--frist end -->
        </div>
    </div>
</div>

<!-- second image and video -->
@isset($receipt_images)


<div class="row mt-2">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <!-- frist tab -->
                        <div class="card">
                            <div class="card-body">
                                <div class="x_title bold">
                                    <h2 style="font-weight: bold">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>
                                <!-- button add -->
                                <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>

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

                </div>
            </div>
        </div>
    </div>
</div>
@endisset
<!-- 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="from_date_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 -->






<!-- /page content -->
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js">
</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