@extends('Admin.layout')

@section('content')

    <h5>
        <button type="button"
            class="btn btn-icon bg-white waves-effect me-2"
            style="box-shadow: 0px 9px 12px -2px #66328E1F;">
            <a href="{{ route('project_table') }}">
                <svg xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="#000"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M15 6l-6 6l6 6" />
                </svg>
            </a>
        </button>

        Create New Project
    </h5>
 <a href="{{ route('project') }}"
       class="btn btn-primary">
        View History
    </a>
    <div class="card mt-3 p-3">

        <form action="{{ route('store_project') }}"
              method="POST"
              id="create_project">

            @csrf

            <div class="row g-4">

                {{-- Project ID --}}
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Project ID
                    </label>

                    <input type="text"
                           class="form-control"
                           placeholder="Enter Project ID"
                           name="project_id"
                           value="{{ old('project_id') }}"
                           required>
                </div>

                {{-- Project Name --}}
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Project Name
                    </label>

                    <input type="text"
                           class="form-control"
                           placeholder="Enter Project Name"
                           name="project_name"
                           value="{{ old('project_name') }}"
                           required>
                </div>

                {{-- Amount --}}
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Project Amount
                    </label>

                    <input type="number"
                           class="form-control"
                           placeholder="Enter Project Amount"
                           name="amount"
                           value="{{ old('amount') }}"
                           min="0"
                           step="0.01"
                           required>
                </div>

                {{-- Phone Number --}}
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Phone Number
                    </label>

                    <input type="text"
                           class="form-control"
                           placeholder="Enter Phone Number"
                           name="phone_number"
                           value="{{ old('phone_number') }}"
                           maxlength="10">
                </div>

                {{-- Email --}}
                <div class="col-md-6">
                    <label class="form-label fw-semibold">
                        Email
                    </label>

                    <input type="email"
                           class="form-control"
                           placeholder="Enter Email"
                           name="email"
                           value="{{ old('email') }}">
                </div>

            </div>

            <div class="mt-4 d-flex justify-content-center gap-3">

                <button type="button"
                        onclick="window.history.back()"
                        class="btn btn-secondary">
                    Cancel
                </button>

                <button type="submit"
                        class="btn btn-primary"
                        id="create_btn">
                    Create Project
                </button>

            </div>

        </form>

    </div>

    <script>
        document.getElementById('create_project').addEventListener('submit', function () {

            let btn = document.getElementById('create_btn');

            btn.disabled = true;
            btn.innerText = 'Processing...';

        });
    </script>

@endsection