@extends('layouts.userapp')

@section('content')

    @if ($message = Session::get('success'))
        <div class="alert alert-success" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($message = Session::get('error'))
        <div class="alert alert-danger" role="alert">
            {{ $message }}
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="card" style="border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);">
        <div class="card-header">
            <h5>Create PR Claim</h5>
        </div>

        <div class="card-body">
            <form action="{{ route('prclaims.store') }}" method="POST">
                @csrf

                {{-- TITLE --}}
                <div class="form-group mb-3">
                    <label for="title">Title <span class="text-danger">*</span></label>
                    <input
                        type="text"
                        class="form-control"
                        id="title"
                        name="title"
                        value="{{ old('title') }}"
                        required
                    >
                </div>

                {{-- TYPE (OT / CLAIM) --}}
                <div class="form-group mb-3">
                    <label class="d-block">
                        Type <span class="text-danger">*</span>
                    </label>

                    <div class="form-check form-check-inline">
                        <input
                            class="form-check-input"
                            type="radio"
                            name="claim_type"
                            id="type_ot"
                            value="ot"
                            {{ old('claim_type') === 'ot' ? 'checked' : '' }}
                            required
                        >
                        <label class="form-check-label" for="type_ot">
                            OT
                        </label>
                    </div>

                    <div class="form-check form-check-inline">
                        <input
                            class="form-check-input"
                            type="radio"
                            name="claim_type"
                            id="type_claim"
                            value="claim"
                            {{ old('claim_type') === 'claim' ? 'checked' : '' }}
                        >
                        <label class="form-check-label" for="type_claim">
                            Claim
                        </label>
                    </div>
                </div>

                {{-- SUBMISSION DATE --}}
                <div class="form-group mb-3">
                    <label for="submission_date">Submission Date</label>
                    <input
                        type="text"
                        class="form-control"
                        id="submission_date"
                        value="{{ date('Y-m-d') }}"
                        readonly
                        style="background-color: #e9ecef;"
                    >
                    <small class="form-text text-muted">
                        Submission date is automatically set to today's date
                    </small>
                </div>

                {{-- SEND TO --}}
                <div class="form-group mb-3">
                    <label for="send_to_user_id">
                        Send To <span class="text-danger">*</span>
                    </label>
                    <select
                        class="form-control"
                        id="send_to_user_id"
                        name="send_to_user_id"
                        required
                    >
                        <option value="">-- Select User --</option>
                        @foreach($users as $user)
                            <option
                                value="{{ $user->id }}"
                                {{ old('send_to_user_id') == $user->id ? 'selected' : '' }}
                            >
                                {{ $user->username }} ({{ $user->email }})
                            </option>
                        @endforeach
                    </select>
                </div>

                {{-- COMMENTS --}}
                <div class="form-group mb-3">
                    <label for="comments">Comments</label>
                    <textarea
                        class="form-control"
                        id="comments"
                        name="comments"
                        rows="5"
                        placeholder="Enter any additional comments or details..."
                    >{{ old('comments') }}</textarea>
                </div>

                {{-- BUTTONS --}}
                <div class="form-group text-center mt-4">
                    <button
                        type="submit"
                        class="btn btn-primary btn-lg px-5"
                        style="border-radius: 25px;"
                    >
                        <i class="fa fa-paper-plane"></i> Submit PR Claim
                    </button>

                    <a
                        href="{{ route('prclaims.index') }}"
                        class="btn btn-secondary btn-lg px-5 ml-2"
                        style="border-radius: 25px;"
                    >
                        <i class="fa fa-times"></i> Cancel
                    </a>
                </div>
            </form>
        </div>
    </div>

    <style>
        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .card-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            font-weight: bold;
        }
    </style>

@endsection