@extends("layouts.admin.app")
@section("page-title")
{{__("Dashboard")}}
@endSection
@section("page-nav-title")
<div class="app-title">
    <div>
        <h1><i class="fa fa-dashboard"></i>{{__("production-order-notes")}}</h1>
        <p>{{__("production-order-notes")}}</p>
    </div>
    <ul class="app-breadcrumb breadcrumb">
        <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
        <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        <li class="breadcrumb-item"><a href="#">{{__("production-order-notes")}}</a></li>
    </ul>
</div>
@endsection

@section("content")
<div class="row">
    <div class="col-md-12">
        <div class="tile" style="background: #053474;">
            <div class="tile-body h-100">
                <div class="container my-5 py-5 text-dark" style="border-radius: 7px">
                    <div class="row d-flex justify-content-center">
                        @forelse($order_notes as $notes)
                        <div class="col-md-4 col-lg-4 col-xl-4">
                            <div class="card">
                                <div class="card-body p-4">
                                    <div class="d-flex flex-start w-100">
                                        <div class="w-100">
                                            <h4 style="display: inline">NOTE :</h4><span>{{$notes->note}}</span>
                                            <div class="d-flex flex-wrap">
                                                <h6 class="bg-primary" style="color: whitesmoke;font-weight: 700;font-size: 13px;border-radius: 7px;width: fit-content;padding: 5px;margin-right: 2px">{{$notes->user->user_name}}</h6>
                                                <h6 class="bg-primary" style="color: whitesmoke;font-weight: 700;font-size: 13px;border-radius: 7px;width: fit-content;padding: 5px;margin-right: 2px">{{$notes->date}}</h6>
                                            </div>
                                            <hr>
                                            <div class="form-outline">
                                                <label class="form-label" for="textAreaExample">Reply Notes?</label>
                                                <textarea class="form-control" id="notes{{$notes->id}}" rows="4">{{$notes->reply}}</textarea>
                                            </div>
                                            <div class="d-flex justify-content-end mt-3">
                                                <button type="button" class="btn btn-danger" onclick="sendNotes({{$notes->id}})">
                                                    Send <i class="fas fa-long-arrow-alt-right ms-1"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-md-4 col-lg-4 col-xl-4">
                            <div class="card">
                                <div class="card-body p-4">
                                    <div class="d-flex flex-start w-100">
                                        <div class="w-100" style="text-align: center">
                                            <h2>{{__('There Is No Notes')}}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section("scripts")
<script type="text/javascript" src="{{asset("assets/js/plugins/jquery.dataTables.min.js")}}"></script>
<script type="text/javascript" src="{{asset("assets/js/plugins/dataTables.bootstrap.min.js")}}"></script>
<script type="text/javascript">
    $('#sampleTable').DataTable({
        "bPaginate": false,
        "bInfo": false
    });
</script>
<script type="text/javascript">
    function sendNotes(notesId) {
        let notes = $("#notes" + notesId).val();
        var baseUrl = window.location.origin;
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: "post",
            url: baseUrl + "/en/ajax/production-orders/productionOrderNotes",
            dataType: 'json',
            data: {
                notesId: notesId,
                maintenanceNotes: notes
            },
            success: function(response) {
                swal({
                    closeOnClickOutside: false,
                    title: "Note Send Successfully",
                    text: response["message"],
                    icon: "success",
                }).then(function() {
                    window.location.href = '{{route("admin.production-orders.index", "all")}}';
                });
            }
        });
    }
</script>

@endsection