@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'Damage')
@endsection

@section('content')

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Damage</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Damage</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Damage Details</h3>
                        </div>
                        <div class="card-body">

                            <div class="row">
                                <div class="col-sm-4 col-md-5 border mt-3 pt-3">
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Damage ID</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control"  value="{{ $max_id }}" id="max_id" readonly>
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Date</label>
                                        <div class="col-sm-9">
                                            <input type="date" class="form-control" id="date">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-7 border mt-3 pt-3">
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Reason</label>
                                        <div class="col-sm-9">
                                            <input type="text" class="form-control" id="remark">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>

            </div>
            <!-- /.row -->
        </div>
    </section>

    <section class="content">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Item Details</h3>
                            <input type="button" class="btn btn-success float-right" data-toggle="modal"
                                data-target="#customer_details" style="text-align: right" value="Add Item (F2)">
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body">
                            <div class="card-body table-responsive p-0" style="height: 350px;">
                                <table class="table table-head-fixed text-nowrap" id="myTable">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Cost</th>
                                            <th>Qty</th>
                                            <th>Total Cost</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- /.card-body -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->


    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- jquery validation -->
                    <div class="card card-primary">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 border pt-3 pl-3 pr-3">
                                    <div class="mb-3 row">
                                        <label for="inputPassword" class="col-sm-3 col-form-label">Total Cost</label>
                                        <div class="col-sm-9">
                                            <label class="col-sm-3 col-form-label" id="net_amount">0.00</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="amount-box right-align float-right mt-3">
                                <button class="btn btn-primary" onclick="save_damage()">Save Damage</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>

            </div>
            <!-- /.row -->
        </div>
    </section>


    <div class="modal fade bd-example-modal-lg" id="customer_details" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">ADD ITEM</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col-sm-12">
                            <div class="mb-3 row">
                                <label for="inputPassword" class="col-sm-3 col-form-label">Item</label>
                                <div class="col-sm-9">
                                    <select class="form-control select2bs4" id="item"
                                            aria-label="Default select example" onchange="change_item(this.value)">
                                        <option value="0">Select Item</option>
                                        @foreach ($spare_parts as $item)
                                            <option value="{{ $item->idItem_details }}">{{ $item->Description }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="inputPassword" class="col-sm-3 col-form-label">Cost</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="cost">
                                </div>
                            </div>
                            <div class="mb-3 row" hidden>
                                <label for="inputPassword" class="col-sm-3 col-form-label">Discount</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="dis">
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="inputPassword" class="col-sm-3 col-form-label">Qty</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="qty">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" class="btn btn-primary" value="Add Items" onclick="adding_item()">
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- /.content-wrapper -->
@endsection

@section('script')
<script src="../plugins/jquery/jquery.min.js"></script>


<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="../plugins/jszip/jszip.min.js"></script>
<script src="../plugins/pdfmake/pdfmake.min.js"></script>
<script src="../plugins/pdfmake/vfs_fonts.js"></script>
<script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../plugins/select2/js/select2.full.min.js"></script>
<!-- jquery-validation -->
<script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="../plugins/jquery-validation/additional-methods.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>

<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<script src="../JS/validate.js"></script>
<script src="../JS/damage.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(function() {

        let x = [ "#cost"];
        decimalFormat(x);

        //Initialize Select2 Elements
        $('.select2').select2()

        //Initialize Select2 Elements
        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('#payment_method').select2({
            theme: 'bootstrap4',
            minimumResultsForSearch: -1
        })


    })
</script>
@endsection