@extends('layouts/contentNavbarLayout')

@section('title', 'Commission Roles - Edit Commission Roles')

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">
            <a href="{{ route('commission-roles') }}" class="text-muted text-decoration-none">Commission Roles</a> /
        </span>
        Edit {{ $user->user->name }}
    </h4>
    <!-- Basic Layout -->
    <div class="row">
        <div class="col-xl">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Update Commission of {{ $user->user->name }}</h5>
                </div>
                <div class="card-body">
                    <form action="{{ route('commissionroles.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="slug" value="{{ $user->id ?? '' }}">
                        <div class="form-floating form-floating-outline mb-4">
                            <input type="number" class="form-control @error('name') is-invalid @enderror"
                                id="basic-default-username" placeholder="Add commission" name="commission_rate"
                                value="{{ $user->commission_rate ?? '' }}" required />
                            <label for="basic-default-username">Set Commission</label>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="date" class="form-control @error('start_date') is-invalid @enderror"
                                        id="start_date" placeholder="Add commission" name="start_date"
                                        value="{{ isset($user->start_date) ? \Carbon\Carbon::parse($user->start_date)->format('Y-m-d') : '' }}" />
                                    <label for="start_date">Start Date</label>
                                    @error('start_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating form-floating-outline mb-4">
                                    <input type="date" class="form-control @error('end_date') is-invalid @enderror"
                                        id="end_date" placeholder="Add commission" name="end_date"
                                        value="{{ isset($user->end_date) ? \Carbon\Carbon::parse($user->end_date)->format('Y-m-d') : '' }}" />
                                    <label for="end_date">End Date</label>
                                    @error('end_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary">Update</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startDateField = document.getElementById('start_date');
            const endDateField = document.getElementById('end_date');

            if (startDateField) {
                startDateField.addEventListener('input', function() {
                    const startDate = this.value;

                    if (startDate) {
                        endDateField.setAttribute('required', 'required'); // Make end date required
                    } else {
                        endDateField.removeAttribute('required'); // Remove required if start date is empty
                    }
                });
            }
        });
    </script>
@endsection