@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <div class="card shadow-sm">
        <section class="content-header m-3">
            <h1>Add Complaint</h1>
        </section>

   <!-- Main content -->
   <section class="content">
    <div class="row">
      <div class="col-xs-12">
          <div class="box box-success">
              <div class="box-header"> 

            <form method="POST" action="{{ route('complaints.store') }}">
                @csrf

                <div class="row mb-4">
                   


                    <!-- Customer Dropdown -->
                    <div class="col-md-4">
                        <label for="customer_id" class="form-label">Customer</label>
                        <select class="form-control" name="customer_id" id="customer_id" required>
                            <option value="">---Select---</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">
                                    {{ $customer->customer_code . ' - ' . $customer->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Customer Name (readonly shown after select, optional) -->
                    <div class="col-md-4">
                        <label for="customer_name" class="form-label">Customer Name</label>
                        <input type="text" class="form-control" id="customer_name" value="00001 - TahaShaikh" readonly>
                    </div>
                
                    <!-- Complain Type -->
                    <div class="col-md-4">
                        <label for="complain_type" class="form-label">Complain Type</label>
                        <select class="form-control" name="complain_type" id="complain_type" required>
                          
                            <option value="technical">Technical Issue</option>
                            <option value="billing">Billing Issue</option>
                            <option value="general">General Inquiry</option>
                        </select>
                    </div>

                        <!-- Assign Person -->
                        <div class="col-md-4">
                            <label for="priority" class="form-label">Priority</label>
                            <select class="form-control" name="priority" id="priority">
                              
                                <option value="high">high</option>
                                <option value="medium">medium</option>
                                <option value="low">low</option>
                                <!-- Add more as needed -->
                            </select>
                        </div> 


                    <!-- Date -->
                    <div class="col-md-4">
                        <label for="complaint_date" class="form-label">Date</label>
                        <input type="text" class="form-control bg-light" value="{{ now()->format('m/d/Y h:i:s A') }}" readonly>
                    </div>
                </div>

                <div class="row mb-3">
                    <!-- Subject -->
                    <div class="col-md-6">
                        <label for="subject" class="form-label">Subject</label>
                        <input type="text" class="form-control" name="subject" id="subject" value="" required>
                    </div>

                    <!-- Detail -->
                    <div class="col-md-6">
                        <label for="detail" class="form-label">Detail</label>
                        <textarea class="form-control" name="detail" id="detail" rows="1" required></textarea>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success">Save</button>
                    <a href="{{ route('complaints.index') }}" class="btn btn-danger">Delete</a>
                </div>
            </form>


        </div>
        <div class="box-body">
    

        </div>


    </div>

</div>
</div>

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

@endsection