@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">
               {{ $ticket ? 'Edit Ticket' : 'Add New Ticket' }}
            </h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('tickets.index') }}">Tickets</a></li>
                    <li class="breadcrumb-item active">Add</li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
    <div class="page-wrapper">
        <div class="page-content">
            <div class="container-fluid">

                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Create Ticket</h4>
                        <p class="text-muted mb-0">Please fill out the form below to Add New Requirement</p>
                    </div>

                    <div class="card-body">
                        <form action="{{ route('tickets.store') }}"
                            method="POST"
                            class="row g-3"
                            enctype="multipart/form-data">
                            @csrf

                            <div class="row g-2">

                                {{-- Project --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <select name="project_id" class="form-select" required>
                                            <option disabled selected>Select Project</option>
                                            @foreach($projects as $project)
                                                <option value="{{ $project->id }}">
                                                    {{ $project->project_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label>Project</label>
                                    </div>
                                </div>

                                {{-- Vendor --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <select name="vendor_id" class="form-select" required>
                                            <option disabled selected>Select Vendor</option>
                                            @foreach($vendors as $vendor)
                                                <option value="{{ $vendor->id }}">
                                                    {{ $vendor->first_name }} {{ $vendor->last_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <label>Vendor</label>
                                    </div>
                                </div>

                                {{-- Requirement Title --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input name="title" type="text"
                                            class="form-control"
                                            placeholder="Requirement Title"
                                            required>
                                        <label>Requirement Title</label>
                                    </div>
                                </div>

                                {{-- Status --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <select name="status" class="form-select" required>
                                            <option disabled selected>Select Status</option>
                                            <option value="Open">Open</option>
                                            <option value="In Progress">In Progress</option>
                                            <option value="Completed">Completed</option>
                                            <option value="Rejected">Rejected</option>
                                        </select>
                                        <label>Ticket Status</label>
                                    </div>
                                </div>

                                {{-- Amount --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <input name="amount" type="text"
                                            class="form-control"
                                            placeholder="Amount"
                                            required>
                                        <label>Amount</label>
                                    </div>
                                </div>

                                {{-- Remarks --}}
                                <div class="col-md-4">
                                    <div class="form-floating">
                                        <textarea name="remarks"
                                                class="form-control"
                                                placeholder="Remarks"></textarea>
                                        <label>Remarks</label>
                                    </div>
                                </div>
                            </div>

                            {{-- Requirement Items --}}
                            <div class="row mt-3">
                                <label class="fw-bold">Requirement Details</label>

                                <div class="col-12 mt-2">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-sm" id="makeEditable">
                                            <thead>
                                                <tr>
                                                    <th>#</th>
                                                    <th>Description</th>
                                                    <th>Make & Model</th>
                                                    <th>Unit</th>
                                                    <th>Quantity</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>

                                    <button type="button" id="but_add2" class="btn btn-primary mt-2">
                                        Add Row
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-12 pt-3">
                                <button type="submit" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>

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

            </div>
        </div>
    </div>
@endsection

@push('footer-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {

    let row = 1;

    $('#but_add2').on('click', function () {

        let currentRow = row;   // store current value

        $('#makeEditable tbody').append(`
            <tr>
                <td>
                    ${currentRow}
                    <input type="hidden" name="items[sr_no][]" value="${currentRow}">
                </td>
                <td>
                    <input type="text" name="items[description][]" class="form-control" required>
                </td>
                <td>
                    <input type="text" name="items[model][]" class="form-control">
                </td>
                <td>
                    <input type="text" name="items[unit][]" class="form-control">
                </td>
                <td>
                    <input type="number" name="items[qty][]" class="form-control" required>
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row">X</button>
                </td>
            </tr>
        `);

        row++; // increment ONCE
    });

    $(document).on('click', '.remove-row', function () {
        $(this).closest('tr').remove();
    });

});

    </script>
@endpush