@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">Edit</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">Edit Ticket</h4>
                        <p class="text-muted mb-0">Please fill out the form below to edit the requirement</p>
                    </div>

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

                            <input type="hidden" name="id" value="{{ $ticket->id }}">

                            {{-- Ticket Creator --}}
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select name="created_by" class="form-select" disabled>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" 
                                                {{ $ticket->creator_id == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label>Ticket Creator</label>
                                </div>
                            </div>

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

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

                            {{-- Maker --}}
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select name="assigned_to" class="form-select">
                                        <option value="">Select Maker</option>
                                        @foreach($users as $user)
                                            <option value="{{ $user->id }}" 
                                                {{ $ticket->creator_id == $user->id ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <label>Maker</label>
                                </div>
                            </div>

                            {{-- Status --}}
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <select name="status" class="form-select">
                                        <option value="">Select Status</option>
                                        <option value="Open" {{ $ticket->status == 'Open' ? 'selected' : '' }}>Open</option>
                                        <option value="In Progress" {{ $ticket->status == 'In Progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="Completed"  {{ $ticket->status == 'Completed' ? 'selected' : '' }}>Completed</option>
                                        <option value="Rejected" {{ $ticket->status == 'Rejected' ? 'selected' : '' }}>Rejected</option>
                                    </select>
                                    <label>Status</label>
                                </div>
                            </div>

                            {{-- Requirement Details --}}
                            <label class="mt-3">Requirement Details</label>

                            <div class="col-12 mt-2">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-sm" id="itemsTable">
                                        <thead>
                                            <tr>
                                                <th>Sr. No.</th>
                                                <th>Description</th>
                                                <th>Make & Model</th>
                                                <th>Unit</th>
                                                <th>Quantity</th>
                                                <th>Rate</th>
                                                <th>Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($ticket->items as $index => $detail)
                                                <tr>
                                                    <td>{{ $detail->sr_no }}</td>

                                                    <td>
                                                        {{ $detail->description }}
                                                        <input type="hidden" name="items[{{ $index }}][id]" value="{{ $detail->id }}">
                                                    </td>

                                                    <td>{{ $detail->make_model }}</td>
                                                    <td>{{ $detail->unit }}</td>

                                                    <td>
                                                        {{ $detail->quantity }}
                                                        <input type="hidden"
                                                            class="qty"
                                                            value="{{ $detail->quantity }}">
                                                    </td>

                                                    {{-- Editable supply rate --}}
                                                    <td>
                                                        <input type="number"
                                                            step="0.01"
                                                            name="items[{{ $index }}][supply_rate]"
                                                            class="form-control supply-rate"
                                                            value="{{ $detail->supply_rate }}">
                                                    </td>

                                                    {{-- Auto calculated amount --}}
                                                    <td>
                                                        <input type="text"
                                                            class="form-control total-amount"
                                                            value="{{ $detail->total_amount }}"
                                                            readonly>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>


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

                            {{-- Amount --}}
                            <div class="col-md-4">
                                <div class="form-floating">
                                    <input name="amount" type="text" class="form-control"
                                        value="{{ $ticket->amount }}">
                                    <label>Total Amount</label>
                                </div>
                            </div>

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

                            {{-- Buttons --}}
                            <div class="col-md-12 pt-3">
                                {{-- @if(auth()->user()->can('update_ticket')) --}}
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                {{-- @endif --}}
                            </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