@include('layouts.header')
@if (Session::has('msg'))
<div style="display: block;" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header alert alert-success">
                <h5 class="modal-title">{{ Session::get('msg')[0] }}</h5>
                <button type="button" class="close errorModal-btn" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success">
                    <p>{{ Session::get('msg')[1] }}</p>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
    <section class="header2">
        <div class="link">
            <a style="color: #000;" href="https://fiji-ports.tk/customerforms">Back</a>
        </div>
        <div>

        </div>
        <div class="logo">
            <img src="./assets/images/fptlogo1.png" alt="">
        </div>
    </section>

    <section class="container form-container1">
        <h1 style="text-align: center;" class="mb-5 formtitlemain">VESSEL DEPOSIT FORM</h1>
        <form action="" method="post">
            @csrf
            <div class="row">
                <div class="col-md-7 row">
                    <div class="col-md-3">
                        <label>VESSEL NAME</label>
                    </div>
                    <div class="col-md-9 full-width-input-container">
                        <input name="vessel_name" type="text3" maxlength="30" required/>
                    </div>
                </div>
                <div class="col-md-5 custom-padding-right-0 row">
                    <div class="col-md-2 label-container1">
                        <label>ETA</label>
                    </div>
                    <div class="col-md-10 custom-padding-right-0 full-width-input-container">
                        <input name="eta" type="datetime-local" required>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-7 row">
                    <div class="col-md-3">
                        <label>VOYAGE NO:</label>
                    </div>
                    <div class="col-md-3 full-width-input-container">
                        <input name="voyage_no" type="text4" maxlength="6" required/>
                    </div>
                    <div class="col-md-2 label-container1">
                        <label>PORT: SUVA</label>
                    </div>
                    <div class="col-md-4 full-width-input-container">
                        <input name="port" type="text5" required>
                    </div>
                </div>
                <div class="col-md-5 custom-padding-right-0 row">
                    <div class="col-md-2 label-container1">
                        <label>ETD</label>
                    </div>
                    <div class="col-md-10 custom-padding-right-0 full-width-input-container">
                        <input name="etd" type="datetime-local" required>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-7 row">
                    <div class="col-md-3">
                        <label>Rotation No</label>
                    </div>
                    <div class="col-md-3 full-width-input-container">
                        <input name="rotations_no" type="text4" maxlength="6" required/>
                    </div>
                    <div class="col-md-2 label-container1">
                        <label>LTK</label>
                    </div>
                    <div class="col-md-4 full-width-input-container">
                        <input name="ltk" type="text5" required>
                    </div>
                </div>
                <div class="col-md-5 custom-padding-right-0 row">
                    <div class="col-md-2 label-container1">
                        <label>GRT</label>
                    </div>
                    <div class="col-md-10 custom-padding-right-0 full-width-input-container">
                        <input name="grt" type="text" required>
                    </div>
                </div>
            </div>

            <div class="form-table-container mt-4">
                <table class="table-vd-inward">
                    <thead>
                        <tr>
                            <th>INWARD</th>
                            <th>QUANTITY</th>
                            <th>AMOUNT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input name="inward[]" type="text" required></td>
                            <td><input name="qty1[]" type="text" maxlength="3" required/></td>
                            <td><input name="amount1[]" type="text" required></td>
                        </tr>

                    </tbody>
                </table>
            </div>

            <div class="vd-inward-add-button vessel-deposit-form-btn1">
                <button>+</button>
            </div>

            <div class="form-table-container mt-4">
                <table class="table-vd-outward">
                    <thead>
                        <tr>
                            <th>OUTWARD</th>
                            <th>QUANTITY</th>
                            <th>AMOUNT</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input name="outward[]" type="text" required></td>
                            <td><input name="qty2[]" type="text" maxlength="3" required/></td>
                            <td><input name="amount2[]" type="text" required></td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="vd-outward-add-button vessel-deposit-form-btn2">
                <button>+</button>
            </div>

            <div class="vd-subtotal row">
                <div class="col-2">
                    <label>SUB-TOTAL</label>
                </div>
                <div class="col-10">
                    <input name="sub_total" type="text" required>
                </div>
            </div>
            <div class="vd-total-in-this-voyage">

            </div>
            <div class="vd-online-ref-number">

            </div>
            <div class="row mt-5">

                <label class="container_checkmark"><input type="checkbox" required>
                    <span class="checkmark"></span>We agents hereby confirm that the information provided in this application are true & further undertake to pay all charges related to this

                </label>
            </div>
            <div class="row mt-5">
                <div class="col-md-4">
                    <p>Agent Name:</p>
                </div>
                <div class="col-md-8">
                    <p>{{ $userData->name }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <p>User Name:</p>
                </div>
                <div class="col-md-8">

                    <p>{{ $userData->username }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <p>Date: </p>
                </div>
                <div class="col-md-8">
                    <p>{{ date("Y/m/d") }}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <p>Time: </p>
                </div>
                <div class="col-md-8">
                    <p>{{ date("h:i a") }}</p>
                </div>
            </div>

            <div class="mt-3 mb-4">
                <b>Please ensure that this form is submitted during Customer Service working hours: between 08:00 and 17:00
                    hours on weekdays and between 08:00 and 13:00 on Saturdays. FPTL accepts no responsibility if the forms
                    are submitted outside working hours and any transactions not being attended to.</b>
            </div>

            <div class="row ">
                <div class="col-md-6"></div>

                <div class="col-md-6 formbuttons">
                    <input type="submit" class="btnsumbit">
                    <a href="{{ url('/customerforms') }}" class="btnsumbit2">Cancel</a>
                </div>

            </div>
        </form>
    </section>


    @include('layouts.footer')