@extends('admin.layouts.app')
@section('title', 'Cash In Manifest')
@section('content')
    <div class="tab-content">
        <div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
            <div class="row">
                <div class="col-lg-9 col-md-12">
                    <div class="main-card mb-3 card">
                        <div class="card-body">
                            <div id="smartwizard">
                                <ul class="forms-wizard">
                                    <li>
                                        <a href="#step-1">
                                            <em>1</em><span>Trip Collection</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#step-2">
                                            <em>2</em><span>Expenses Information</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#step-3">
                                            <em>3</em><span>Cash Out</span>
                                        </a>
                                    </li>
                                </ul>
{{--                                <form>--}}
                                @foreach($manifestsSummary as $i => $manifest)
                                    <div class="form-wizard-content" method="post" enctype="multipart/form-data" action="{{ route('Create Trip Voucher') }}">

                                        <div id="step-1">
                                            <div class="form-row">
                                                <div class="col-md-4">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets Gross
                                                            Collection</label><input name="totalCollection" disabled
                                                                                     id="ticketManifestCollection"
                                                                                     value="{{ number_format($manifest->collection) }}"
                                                                                     type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets Estimated
                                                            Collection</label><input name="net_collection" disabled
                                                                                     id="net_collection"
                                                                                     value="{{ $net_collection }}"
                                                                                     type="text" class="form-control">
                                                    </div>
                                                </div>

                                                <div class="col-md-4">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets & Parcel
                                                            Collection</label><input name="totalCollectionSum"
                                                                                     id="totalCollectionSum"
                                                                                     value="" disabled
                                                                                     type="number" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-row">
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group"><label for="bus" class="">
                                                            BUS</label>
                                                        <select name="bus" id="bus" class="form-control" required>
                                                            <option
                                                                value="{{ $manifest->busRegNo }}">{{ $manifest->busRegNo }}</option>
                                                            @foreach ($buses as $bus)
                                                                <option value="{{ $bus->bus_reg_no }}">{{ $bus->bus_reg_no }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group"><label for="capacity"
                                                                                                     class="">
                                                            Collected From</label>
                                                        <select name="collected_from" id="collected_from" class="form-control" required>
                                                            <option value=""></option>
                                                            @foreach ($agents as $agent)
                                                                <option value="{{ $agent->agentId }}">{{ $agent->name }}
                                                                    @if($agent->type == 1)
                                                                        (Driver/Conductor/Staff)
                                                                    @elseif($agent->type == 2)
                                                                        (Agent)
                                                                    @endif
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="form-row">
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets
                                                            Collection</label><input name="ticketCollection"
                                                                                     id="ticketCollectionNum"
                                                                                     value=""
                                                                                     type="number" class="form-control" onblur="reSum();">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Parcel & Luggages
                                                            Collection</label><input name="parcelCollection"
                                                                                     id="parcelCollectionNum"
                                                                                     value=""
                                                                                     type="number" class="form-control" onblur="reSum();">
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <div id="step-2">
                                            <div class="form-row">
                                                <div class="col-md-3">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets Gross
                                                            Collection</label><input name="totalCollection" disabled
                                                                                     value="{{ number_format($manifest->collection) }}"
                                                                                     type="text" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="position-relative form-group"><label
                                                            for="exampleEmail55">Tickets & Parcel
                                                            Collection</label><input name="totalCollectionSum2"
                                                                                     id="totalCollectionSum2"
                                                                                     value="" disabled
                                                                                     type="number" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="position-relative form-group"><label>Bookings Commission
                                                            </label><input name="bookingCommission"
                                                                                     id="bookingsCommission"
                                                                                     value="{{ $bookings_comission }}" disabled
                                                                                     type="number" class="form-control">
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <div class="position-relative form-group"><label>Operational Expenses
                                                        </label><input name="operationalExpenses"
                                                                                     id="operationalExpenses"
                                                                                     value="" disabled
                                                                                     type="number" class="form-control">
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="card">
                                                <div id="headingOne" class="card-header">
                                                    <button type="button" data-toggle="collapse"
                                                            data-target="#collapseOne" aria-expanded="false"
                                                            aria-controls="collapseOne"
                                                            class="text-left m-0 p-0 btn btn-link btn-block">
                                                        <span
                                                            class="form-heading"><p>Enter expenses description below</p></span>
                                                    </button>
                                                </div>
                                                <div data-parent="#accordion" id="collapseOne"
                                                     aria-labelledby="headingOne" class="collapse show">
                                                    <div class="card-body">

                                                        <div class="form-row">
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Driver
                                                                        Commission</label><input
                                                                        id="exp1" onblur="reSum();" value="0"
                                                                        name="driver_commission" type="number"
                                                                        class="form-control"></div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Conductor
                                                                        Commission</label><input
                                                                        id="exp2" onblur="reSum();" value="0"
                                                                        name="conductor_commission" type="number"
                                                                        class="form-control"></div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Debe </label><input
                                                                        id="exp3" onblur="reSum();" value="0"
                                                                        name="debe_commission" type="number"
                                                                        class="form-control"></div>
                                                            </div>
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Parking/Stand
                                                                        Fee</label><input name="parikng" type="number"
                                                                                          id="exp4" onblur="reSum();" value="0"
                                                                                          class="form-control"></div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Washing</label><input
                                                                        name="washing" type="number"
                                                                        id="exp5" onblur="reSum();" value="0"
                                                                        class="form-control"></div>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <div class="position-relative form-group"><label for="">Traffic
                                                                        Fines</label><input name="fines" type="number"
                                                                                            id="exp6" onblur="reSum();" value="0"
                                                                                            class="form-control"></div>
                                                            </div>
                                                        </div>
                                                        <div class="form-row">
                                                            <div class="col-md-12">
                                                                <div class="position-relative form-group"><label for="">Other
                                                                        Expenses</label><input name="other_expenses" type="number"
                                                                                               id="exp7" onblur="reSum();" value="0"
                                                                                          class="form-control"></div>
                                                            </div>
                                                        </div>


                                                        <div class="position-relative form-group"><textarea
                                                                name="more_description" maxlength="4"
                                                                placeholder="More Description (Optional)" type="text"
                                                                class="form-control"></textarea></div>
                                                    </div>
                                                </div>
                                            </div>


                                        </div>
                                        <div id="step-3">
                                            <div class="no-results">
                                                <form method="post" enctype="multipart/form-data" action="{{ route('Create Trip Voucher') }}">
                                                    @csrf
                                                <div class="swal2-icon swal2-success swal2-animate-success-icon">
                                                    <div class="swal2-success-circular-line-left"
                                                         style="background-color: rgb(255, 255, 255);"></div>
                                                    <span class="swal2-success-line-tip"></span>
                                                    <span class="swal2-success-line-long"></span>
                                                    <div class="swal2-success-ring"></div>
                                                    <div class="swal2-success-fix"
                                                         style="background-color: rgb(255, 255, 255);"></div>
                                                    <div class="swal2-success-circular-line-right"
                                                         style="background-color: rgb(255, 255, 255);"></div>
                                                </div>
                                                <div class="results-subtitle mt-4">Finished!</div>
                                                <div class="results-title">CASH-IN & Close
                                                    MANIFEST
                                                </div>
                                                <div class="row">
                                                <div class="mt-3 mb-3"></div>
                                                <div class="col-md-4"></div>
                                                <div class="col-md-4">
                                                    <div class="card-body">
                                                        <div class="vertical-timeline vertical-timeline--animate vertical-timeline--one-column">
                                                            <div class="vertical-timeline-item vertical-timeline-element">

                                                        <span class="vertical-timeline-element-icon bounce-in">
                                                            <i class="badge badge-dot badge-dot-xl badge-info"> </i>
                                                        </span>
                                                                    <div class="vertical-timeline-element-content bounce-in">
                                                                        <h4 class="timeline-title"><input name="grandCollection"
                                                                                                          id="grandCollection"
                                                                                                          type="number" class="form-control">
                                                                            <input name="busRegNo"
                                                                                   id="busRegNo" hidden
                                                                                   type="text" class="form-control">
                                                                            <input name="agentId"
                                                                                   id="agentId" hidden
                                                                                   type="text" class="form-control">

                                                                            <input name="schedule" value="{{ $schedule }}"
                                                                                   hidden class="form-control">
                                                                        </h4>
                                                                        <span class="vertical-timeline-element-date">COLLECTION</span>
                                                                    </div>

                                                            </div>
                                                            <div class="vertical-timeline-item vertical-timeline-element">

                                                        <span class="vertical-timeline-element-icon bounce-in">
                                                            <i class="badge badge-dot badge-dot-xl badge-danger"> </i>
                                                        </span>
                                                                    <div class="vertical-timeline-element-content bounce-in">
                                                                        <h4 class="timeline-title"><input name="grandExpenses"
                                                                                                          id="grandExpenses"
                                                                                                          type="number" class="form-control"></h4>
                                                                        <span class="vertical-timeline-element-date">EXPENSES</span>
                                                                    </div>

                                                            </div>

                                                            <div class="vertical-timeline-item vertical-timeline-element">

                                                        <span class="vertical-timeline-element-icon bounce-in">
                                                            <i class="badge badge-dot badge-dot-xl badge-success"> </i>
                                                        </span>
                                                                    <div class="vertical-timeline-element-content bounce-in">
                                                                        <h4 class="timeline-title text-success"><input name="grandBalance"
                                                                                                                       id="grandBalance"
                                                                                                                       type="number" class="form-control"></h4>
                                                                        <span class="vertical-timeline-element-date">BALANCE</span>
                                                                    </div>

                                                            </div>
                                                            <div class="vertical-timeline-item vertical-timeline-element">

                                                        <span class="vertical-timeline-element-icon bounce-in">
                                                            <i class="badge badge-dot badge-dot-xl badge-warning"> </i>
                                                        </span>
                                                                <div class="vertical-timeline-element-content bounce-in">
                                                                    <h4 class="timeline-title"><input name="deficit"
                                                                                                      id="deficit"
                                                                                                      type="number" class="form-control"></h4>
                                                                    <span class="vertical-timeline-element-date">DEFICIT</span>
                                                                </div>

                                                            </div>

                                                        </div>

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

                                                <div class="text-center">
                                                    <button type="submit" class="btn-shadow btn-wide btn btn-success btn-lg">CASH-IN
                                                    </button>
                                                </div>
                                                </form>
                                            </div>

                                        </div>

                                    </div>
                                @endforeach

                            </div>
                            <div class="divider"></div>
                            <div class="clearfix">
                                <button type="button" id="next-btn"
                                        class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">
                                    Next
                                </button>
                                <button type="button" id="prev-btn"
                                        class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">
                                    Previous
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-3">
                    <div class="main-card mb-3 card">
                        <div class="card-header">Approval Status</div>
                        <ul class="todo-list-wrapper list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="todo-indicator bg-warning"></div>
                                <div class="widget-content p-0">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left mr-2">
                                            <div class="custom-checkbox custom-control">
                                                <input type="checkbox" id="exampleCustomCheckbox12" checked
                                                       class="custom-control-input">
                                                <label class="custom-control-label"
                                                       for="exampleCustomCheckbox12">&nbsp;</label></div>
                                        </div>
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Submitted By Conductor/Agent
                                            </div>
                                            <div>
                                                <div class="badge badge-pill badge-warning ml-2">on progress</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="todo-indicator bg-focus"></div>
                                <div class="widget-content p-0">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left mr-2">
                                            <div class="custom-checkbox custom-control">
                                                <input type="checkbox" id="exampleCustomCheckbox1"
                                                       class="custom-control-input">
                                                <label class="custom-control-label"
                                                       for="exampleCustomCheckbox1">&nbsp;</label></div>
                                        </div>
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Cash In by Accountant</div>
                                            <div class="widget-subheading">
                                                <div>Cash-In By ......
                                                    <div class="badge badge-pill badge-info ml-2">incomplete</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="todo-indicator bg-primary"></div>
                                <div class="widget-content p-0">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left mr-2">
                                            <div class="custom-checkbox custom-control">
                                                <input type="checkbox" id="exampleCustomCheckbox4"
                                                       class="custom-control-input">
                                                <label class="custom-control-label"
                                                       for="exampleCustomCheckbox4">&nbsp;</label></div>
                                        </div>
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Cash Out to Bank</div>
                                            <div class="widget-subheading">
                                                <div>Cash-Out by ......
                                                    <div class="badge badge-pill badge-info ml-2">incomplete</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="todo-indicator bg-info"></div>
                                <div class="widget-content p-0">
                                    <div class="widget-content-wrapper">
                                        <div class="widget-content-left mr-2">
                                            <div class="custom-checkbox custom-control"><input type="checkbox"
                                                                                               id="exampleCustomCheckbox2"
                                                                                               class="custom-control-input"><label
                                                    class="custom-control-label"
                                                    for="exampleCustomCheckbox2">&nbsp;</label></div>
                                        </div>
                                        <div class="widget-content-left">
                                            <div class="widget-heading">Accounts Senior / Manager</div>
                                            <div class="widget-subheading">
                                                <div>Approved by ......
                                                    <div class="badge badge-pill badge-info ml-2">incomplete</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane tabs-animation fade" id="tab-content-2" role="tabpanel">
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <div id="smartwizard3" class="forms-wizard-vertical">
                        <ul class="forms-wizard">
                            <li>
                                <a href="#step-122">
                                    <em>1</em><span>Account Information</span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-222">
                                    <em>2</em><span>Payment Information</span>
                                </a>
                            </li>
                            <li>
                                <a href="#step-322">
                                    <em>3</em><span>Finish Wizard</span>
                                </a>
                            </li>
                        </ul>
                        <div class="form-wizard-content">
                            <div id="step-122">
                                <div class="card-body">
                                    <div class="position-relative form-group"><label for="exampleEmail5">Input without
                                            validation</label><input type="text" class="form-control">
                                        <div class="invalid-feedback">You will not be able to see this</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                    <div class="position-relative form-group"><label for="exampleEmail6">Valid
                                            input</label><input type="text" class="is-valid form-control">
                                        <div class="valid-feedback">Sweet! that name is available</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                    <div class="position-relative form-group"><label for="examplePassword">Invalid
                                            input</label><input type="text" class="is-invalid form-control">
                                        <div class="invalid-feedback">Oh noes! that name is already taken</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                    <div class="position-relative form-group"><label for="exampleEmail7">Input without
                                            validation</label><input type="text" class="form-control">
                                        <div class="invalid-tooltip">You will not be able to see this</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                    <div class="position-relative form-group"><label for="exampleEmail">Valid
                                            input</label><input type="text" class="is-valid form-control">
                                        <div class="valid-tooltip">Sweet! that name is available</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                    <div class="position-relative form-group"><label for="examplePassword">Invalid
                                            input</label><input type="text" class="is-invalid form-control">
                                        <div class="invalid-tooltip">Oh noes! that name is already taken</div>
                                        <small class="form-text text-muted">Example help text that remains
                                            unchanged.</small>
                                    </div>
                                </div>
                            </div>
                            <div id="step-222">
                                <div id="accordion" class="accordion-wrapper mb-3">
                                    <div class="card">
                                        <div id="headingTwo" class="b-radius-0 card-header">
                                            <button type="button" data-toggle="collapse" data-target="#collapseTwo"
                                                    aria-expanded="false" aria-controls="collapseTwo"
                                                    class="text-left m-0 p-0 btn btn-link btn-block">
                                                <span class="form-heading">Credit Card Informations<p>Enter your user informations below</p></span>
                                            </button>
                                        </div>
                                        <div data-parent="#accordion" id="collapseTwo" class="collapse show">
                                            <div class="card-body">
                                                <div class="position-relative form-group"><label for="exampleEmail3">Plain
                                                        Text (Static)</label>
                                                    <p class="form-control-plaintext">Some plain text/ static value</p>
                                                </div>
                                                <div class="position-relative form-group"><label for="exampleEmail4">Email</label><input
                                                        name="email" id="exampleEmail4" placeholder="with a placeholder"
                                                        type="email"
                                                        class="form-control"></div>
                                                <div class="position-relative form-group"><label for="examplePassword">Password</label><input
                                                        name="password" id="examplePassword"
                                                        placeholder="password placeholder" type="password"
                                                        class="form-control"></div>
                                                <div class="position-relative form-group"><label
                                                        for="exampleUrl">Url</label><input name="url" id="exampleUrl"
                                                                                           placeholder="url placeholder"
                                                                                           type="url"
                                                                                           class="form-control"></div>
                                                <div class="position-relative form-group"><label for="exampleNumber">Number</label><input
                                                        name="number" id="exampleNumber"
                                                        placeholder="number placeholder" type="number"
                                                        class="form-control"></div>
                                                <div class="position-relative form-group"><label for="exampleDatetime">Datetime</label><input
                                                        name="datetime" id="exampleDatetime"
                                                        placeholder="datetime placeholder" type="datetime"
                                                        class="form-control"></div>
                                                <div class="position-relative form-group"><label
                                                        for="exampleDate">Date</label><input name="date"
                                                                                             id="exampleDate"
                                                                                             placeholder="date placeholder"
                                                                                             type="date"
                                                                                             class="form-control"></div>
                                                <div class="position-relative form-group"><label
                                                        for="exampleTime">Time</label><input name="time"
                                                                                             id="exampleTime"
                                                                                             placeholder="time placeholder"
                                                                                             type="time"
                                                                                             class="form-control"></div>
                                                <div class="position-relative form-group"><label for="exampleColor">Color</label><input
                                                        name="color" id="exampleColor" placeholder="color placeholder"
                                                        type="color" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="step-322">
                                <div class="no-results">
                                    <div class="swal2-icon swal2-success swal2-animate-success-icon">
                                        <div class="swal2-success-circular-line-left"
                                             style="background-color: rgb(255, 255, 255);"></div>
                                        <span class="swal2-success-line-tip"></span>
                                        <span class="swal2-success-line-long"></span>
                                        <div class="swal2-success-ring"></div>
                                        <div class="swal2-success-fix"
                                             style="background-color: rgb(255, 255, 255);"></div>
                                        <div class="swal2-success-circular-line-right"
                                             style="background-color: rgb(255, 255, 255);"></div>
                                    </div>
                                    <div class="results-subtitle mt-4">Finished!</div>
                                    <div class="results-title">You arrived at the last form wizard step!</div>
                                    <div class="mt-3 mb-3"></div>
                                    <div class="text-center">
                                        <button class="btn-shadow btn-wide btn btn-success btn-lg">Finish</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="divider"></div>
                    <div class="clearfix">
                        <button type="button" id="reset-btn22" class="btn-shadow float-left btn btn-link">Reset</button>
                        <button type="button" id="next-btn22"
                                class="btn-shadow btn-wide float-right btn-pill btn-hover-shine btn btn-primary">Next
                        </button>
                        <button type="button" id="prev-btn22"
                                class="btn-shadow float-right btn-wide btn-pill mr-3 btn btn-outline-secondary">Previous
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection