@extends('adminlte::page')

@section('title', 'Create Project')

@section('content_header')
    <h1>Create New Project</h1>
@stop

@section('content')
    <form action="{{ route('projects.store') }}" method="POST">
        @csrf
        <div class="form-group">
            <label for="name">Project Name</label>
            <input type="text" name="name" id="name" class="form-control" required>
        </div>

        <div class="form-group">
            <label for="code">Project Code</label>
            <input type="text" name="code" id="code" class="form-control" required>
        </div>
                <div class="form-group">
            <label for="address">Address</label>
            <textarea name="address" id="address" class="form-control" required></textarea>
        </div>



        <div class="form-group">
            <label for="description">Description</label>
            <textarea name="description" id="description" class="form-control" required></textarea>
        </div>


        <div class="form-group">
            <label for="status">Status</label>
            <select name="status" id="status" class="form-control" required>
                <option value="ongoing">Ongoing</option>
                <option value="completed">Completed</option>
                <option value="pending">Pending</option>
            </select>
        </div>

        <!-- Assign Supervisor Dropdown -->
        <div class="form-group">
            <label for="assign_supervisor">Assign Supervisor</label>
            <select name="assign_supervisor[]" id="assign_supervisor" class="form-control select2" multiple>
                @foreach($assignSupervisors as $supervisor)
                    <option value="{{ $supervisor->id }}">{{ $supervisor->name }} {{ $supervisor->last_name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Assign Senior Supervisor Dropdown -->
        <div class="form-group">
            <label for="assign_senior_supervisor">Assign Senior Supervisor</label>
            <select name="assign_senior_supervisor[]" id="assign_senior_supervisor" multiple class="form-control select2">
                @foreach($assignSeniorSupervisors as $seniorSupervisor)
                    <option value="{{ $seniorSupervisor->id }}">{{ $seniorSupervisor->name }} {{ $seniorSupervisor->last_name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Assign Client Dropdown -->
        <div class="form-group">
            <label for="assign_client">Assign Client</label>
            <select name="assign_clients[]" id="assign_clients" class="form-control select2" multiple>
                @foreach($assignClients as $client)
                    <option value="{{ $client->id }}">{{ $client->name }} {{ $client->last_name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Assign Worker Dropdown -->
        <div class="form-group">
            <label for="assign_worker">Assign Worker</label>
            <select name="assign_worker[]" id="assign_worker" class="form-control select2" multiple>
                @foreach($assignWorkers as $worker)
                    <option value="{{ $worker->id }}">{{ $worker->name }} {{ $worker->last_name }}</option>
                @endforeach
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Create Project</button>
    </form>
@stop
@section('css')

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet">
    <style>
        /* Change the color of selected options in select2 */
        .select2-container .select2-selection--multiple .select2-selection__choice {
            color: #000 !important; /* Apply black color to the selected option text */
        }
        .select2-container .select2-selection--multiple .select2-selection__choice__remove {
            color: #000 !important; /* Change the remove button color to black too */
        }
    </style>
    @stop

@section('js')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>

    <script>
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "Select options",
                allowClear: true
            });
       
            
        });
    </script>
  
@stop