@extends('manager.layouts.app')
@section('page_title') {{ $page_title ?? 'Create Program' }} @endsection
@push('head-scripts')
    <link rel="stylesheet" href="{{ asset('manager/select2/dist/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('manager/select2/dist/css/select2-bootstrap5.min.css') }}"/>
    <link href="{{ asset('manager/cropper/cropper.min.css') }}" rel="stylesheet"/>
    <style>
        img { max-width: 100%; }
        .form-label { font-weight: 600; font-size: 0.875rem; }
        .input-group-text { font-size: 0.85rem; background-color: #f8f9fa; }
    </style>
@endpush

@section('content')
    <div class="card mt-3">
        <div class="card-body">
            {{-- Page Header --}}
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h4 class="card-title mb-0">{{ $p_title ?? '' }}</h4>
                    <div class="small text-medium-emphasis">{{ $p_summary ?? '' }}</div>
                </div>
                @can('manager_transaction_program-list')
                    <a href="{{ $url ?? '#' }}" class="btn btn-sm btn-primary">
                        <i class="cil-list me-1"></i> {{ $url_text ?? 'Back to List' }}
                    </a>
                @endcan
            </div>
            <hr>

            <form method="{{ $method }}" action="{{ $action }}" enctype="{{ $enctype }}">
                @csrf

                {{-- Basic Information --}}
                <div class="row g-3 mb-4">
                    <div class="col-md-6">
                        <label class="form-label" for="name">Program Name</label>
                        <input type="text" name="name" id="name" required 
                               class="form-control @error('name') is-invalid @enderror" 
                               placeholder="e.g. FSC" value="{{ old('name') }}">
                        @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="slug">URL Slug</label>
                        <input type="text" name="slug" id="slug" required readonly
                               class="form-control bg-light @error('slug') is-invalid @enderror" 
                               value="{{ old('slug') }}">
                        @error('slug') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    
                    <div class="col-md-6">
                        <label class="form-label" for="group">Discipline / Group</label>
                        <select name="group" id="group" required class="select2-group form-control @error('group') is-invalid @enderror">
                            <option value=""></option>
                            @foreach($groups as $grp)
                                <option value="{{ $grp }}" {{ old('group') == $grp ? 'selected' : '' }}>{{ $grp }}</option>
                            @endforeach
                        </select>
                        @error('group') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="program-year">Academic Year</label>    
                        <select name="program_year" id="program-year" required class="select2-year form-control @error('program_year') is-invalid @enderror">
                            <option value=""></option>
                            <option value="1" {{ old('program_year') == '1' ? 'selected' : '' }}>1st Year</option>
                            <option value="2" {{ old('program_year') == '2' ? 'selected' : '' }}>2nd Year</option>
                        </select>
                        @error('program_year') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-3">
                        <label class="form-label" for="session">Session</label>
                        <input type="text" name="session" id="session" required 
                               class="form-control @error('session') is-invalid @enderror" 
                               placeholder="2025-26" value="{{ old('session') }}">
                        @error('session') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="status">Publication Status</label>
                        <select name="status" class="form-select">
                            <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>Active</option>
                            <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>Inactive</option>
                        </select>
                    </div>
                </div>

                <hr class="my-4">

                {{-- Fee Structure --}}
                <div class="mb-4">
                    <h5 class="card-title mb-1">{{ $fee_title ?? 'Fee Structure' }}</h5>
                    <p class="small text-medium-emphasis mb-3">{{ $fee_summary ?? 'Define the breakdown of charges' }}</p>
                    
                    <div class="row g-3">
                        @foreach($feeFields as $name => $label)
                        <div class="col-md-4">
                            <label class="form-label" for="{{ $name }}">{{ $label }}</label>
                            <div class="input-group">
                                <span class="input-group-text">Rs</span>
                                <input type="text" name="{{ $name }}" id="{{ $name }}" 
                                       class="form-control @error($name) is-invalid @enderror" 
                                       placeholder="0.00" 
                                       value="{{ old($name, $name == 'board_registration_fee' ? 'As Per Actual' : '') }}"
                                       @if($name == 'board_registration_fee') list="board_fee_options" @endif>
                            </div>
                            @error($name) <div class="invalid-feedback d-block">{{ $message }}</div> @enderror
                        </div>
                        @endforeach
                        <datalist id="board_fee_options">
                            <option value="As Per Actual">
                        </datalist>
                    </div>
                </div>

                <hr class="my-4">

                {{-- SEO Details --}}
                <h5 class="mb-3">SEO Configuration</h5>
                <div class="row g-3 mb-4">
                    <div class="col-12">
                        <label class="form-label" for="seo_title">SEO Title</label>
                        <input type="text" name="seo_title" id="seo_title" class="form-control @error('seo_title') is-invalid @enderror" placeholder="Meta title" value="{{ old('seo_title') }}">
                        @error('seo_title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label" for="seo_description">SEO Description</label>
                        <textarea name="seo_description" id="seo_description" class="form-control @error('seo_description') is-invalid @enderror" rows="2" placeholder="Meta description">{{ old('seo_description') }}</textarea>
                        @error('seo_description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="seo_keyword">SEO Keywords</label>
                        <textarea name="seo_keyword" id="seo_keyword" class="form-control @error('seo_keyword') is-invalid @enderror" rows="2" placeholder="e.g. fsc, pre-medical, admission">{{ old('seo_keyword') }}</textarea>
                        @error('seo_keyword') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="seo_tags">SEO Tags</label>
                        <textarea name="seo_tags" id="seo_tags" class="form-control @error('seo_tags') is-invalid @enderror" rows="2" placeholder="e.g. education, college, lahore">{{ old('seo_tags') }}</textarea>
                        @error('seo_tags') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="card-footer bg-transparent border-0 px-0">
                    <button type="submit" class="btn btn-success px-4 text-white">
                        <i class="cil-check me-1"></i> Save Program
                    </button>
                </div>
            </form>

            @if(!empty($p_description))
                <div class="alert alert-light border mt-4">
                    <p class="mb-0 small text-muted">{{ $p_description }}</p>
                </div>
            @endif
        </div>
    </div>
@endsection

@push('footer-scripts')
    <script src="{{ asset('manager/select2/dist/js/select2.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            // Select2 Config
            $('.select2-group').select2({ theme: "bootstrap5", placeholder: "Select Group", allowClear: true });
            $('.select2-year').select2({ theme: "bootstrap5", placeholder: "Select Year", allowClear: true, minimumResultsForSearch: Infinity });

            // Slug Generation Logic
            function generateSlug(text) {
                return text.toString().toLowerCase().trim()
                    .replace(/&/g, '-and-')
                    .replace(/[\s\W-]+/g, '-')
                    .replace(/^-+|-+$/g, '');
            }

            $('#name, #group, #program-year, #session').on('keyup blur change', function () {
                let parts = [
                    $('#name').val(),
                    $('#group').val(),
                    $('#program-year').val() ? $('#program-year').val() + 'year' : '',
                    $('#session').val()
                ];

                // Filter out empty parts and join
                let combined = parts.filter(Boolean).join('-');
                $('#slug').val(generateSlug(combined));
            });
        });
    </script>
    
    @if(Session::has('messages'))
        <script>noti({!! json_encode(Session::get('messages')) !!});</script>
    @endif
@endpush