@extends('layout.app')

@section('content')
    <style>
        .job-form-section {
            background: #fff;
            padding: 40px 20px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .job-form-section h2 {
            color: #3e94e7;
            margin-bottom: 30px;
        }

        .form-label {
            font-weight: 500;
        }

        .btn-primary {
            background-color: #3e94e7;
            border-color: #3e94e7;
        }
    </style>

    <section class="friend-request-sec py-5" style="background: #f7f9fc;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">

                    <div class="job-form-section">
                        <h2 class="text-center">Training List Form</h2>

                        @if ($errors->any())
                            @foreach ($errors->all() as $error)
                                <label class="text-danger">{{ $error }}</label>
                            @endforeach
                        @endif

                        <form id="marketPlaceTrainingStore" method="POST"
                              action="{{ route('training.page.create.store') }}" enctype="multipart/form-data">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Advertiser Name</label>
                                <input type="text" name="advertiser_name" class="form-control"
                                       value="{{ old('advertiser_name') }}" placeholder="Enter name"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Company Name</label>
                                <input type="text" name="company_name" class="form-control"
                                       value="{{ old('company_name') }}" placeholder="Company name"
                                       required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Company Website</label>
                                <input type="url" name="company_website" placeholder="Company website"
                                       value="{{ old('company_website') }}"
                                       class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Company Type</label>
                                <select name="company_type" class="form-select">
                                    <option value="" disabled selected>Select</option>
                                    <option
                                        value="individual" {{ old('company_type') == 'individual' ? 'selected' : '' }}>
                                        Individual Trainer
                                    </option>
                                    <option
                                        value="organization" {{ old('company_type') == 'organization' ? 'selected' : '' }}>
                                        Training Organization
                                    </option>
                                    <option value="other" {{ old('company_type') == 'other' ? 'selected' : '' }}>Other
                                    </option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Company Address <small>(optional)</small></label>
                                <input type="text" name="company_address" value="{{ old('company_address') }}"
                                       placeholder="Company Address"
                                       class="form-control">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Is this a Small Business?</label><br>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="is_small_business" value="yes"
                                        {{ old('is_small_business') == 'yes' ? 'checked' : '' }}>
                                    <label class="form-check-label">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="is_small_business" value="no"
                                        {{ old('is_small_business') == 'no' ? 'checked' : '' }}>
                                    <label class="form-check-label">No</label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Advertiser Phone</label>
                                <input type="tel" name="advertiser_phone" class="form-control"
                                       placeholder="Advertiser Phone" value="{{ old('advertiser_phone') }}" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Advertiser Email</label>
                                <input type="email" name="advertiser_email" class="form-control"
                                       placeholder="Advertiser Email" value="{{ old('advertiser_email') }}" required>
                            </div>

                            {{--                            <div class="mb-3">--}}
                            {{--                                <label class="form-label">Confirm Email</label>--}}
                            {{--                                <input type="email" name="confirm_email" class="form-control"--}}
                            {{--                                       placeholder="Confirm Email" value="{{ old('confirm_email') }}" required>--}}
                            {{--                            </div>--}}

                            {{--                            <div class="mb-3">--}}
                            {{--                                <label class="form-label">Contact Person Details</label>--}}
                            {{--                                <input type="text" name="contact_person" class="form-control" placeholder="Phone and Email">--}}
                            {{--                            </div>--}}

                            <div class="mb-3">
                                <label class="form-label">Industry Type</label>
                                <select name="industry_type" class="form-select" required>
                                    <option value="" selected disabled>Select</option>
                                    <option
                                        value="accounting" {{ old('industry_type') == 'accounting' ? 'selected' : '' }}>
                                        Accounting
                                    </option>
                                    <option
                                        value="financial" {{ old('industry_type') == 'financial' ? 'selected' : '' }}>
                                        Financial
                                    </option>
                                    <option
                                        value="manufacturing" {{ old('industry_type') == 'manufacturing' ? 'selected' : '' }}>
                                        Manufacturing
                                    </option>
                                    <option value="other" {{ old('industry_type') == 'other' ? 'selected' : '' }}>
                                        Other
                                    </option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Type</label>
                                <select name="training_type" class="form-select" required>
                                    <option value="" selected disabled>Select</option>
                                    <option
                                        value="Business Analysis" {{ old('training_type') == 'Business Analysis' ? 'selected' : '' }}>
                                        Business Analysis
                                    </option>
                                    <option
                                        value="Business Process" {{ old('training_type') == 'Business Process' ? 'selected' : '' }}>
                                        Business Process
                                    </option>
                                    <option value="Coding" {{ old('training_type') == 'Coding' ? 'selected' : '' }}>
                                        Coding
                                    </option>
                                    <option value="Testing" {{ old('training_type') == 'Testing' ? 'selected' : '' }}>
                                        Testing
                                    </option>
                                    <option value="Dev Ops" {{ old('training_type') == 'Dev Ops' ? 'selected' : '' }}>
                                        Dev Ops
                                    </option>
                                    <option
                                        value="IT Support" {{ old('training_type') == 'IT Support' ? 'selected' : '' }}>
                                        IT Support
                                    </option>
                                    <option value="Other" {{ old('training_type') == 'Other' ? 'selected' : '' }}>
                                        Other
                                    </option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Format</label>
                                <select name="training_format" class="form-select">
                                    <option
                                        value="in-person" {{ old('training_format') == 'in-person' ? 'selected' : '' }}>
                                        In-person
                                    </option>
                                    <option value="online" selected>Online</option>
                                    <option value="hybrid" {{ old('training_format') == 'hybrid' ? 'selected' : '' }}>
                                        Hybrid
                                    </option>
                                </select>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Training Location</label>
                                <input type="text" name="training_location" class="form-control" value="Online">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Select Coding Languages</label>

                                <div class="dropdown">
                                    <button class="btn btn-outline-primary dropdown-toggle w-100 text-start"
                                            type="button"
                                            data-bs-toggle="dropdown" aria-expanded="false">
                                        Choose Languages
                                    </button>
                                    <ul class="dropdown-menu p-3"
                                        style="width: 100%; max-height: 250px; overflow-y: auto;">

                                        <!-- Programming Languages -->
                                        @php $i = 1; @endphp

                                        @foreach([
                                            'Python', 'JavaScript', 'Java', 'C#', 'C++', 'PHP', 'Ruby', 'Go', 'Swift',
                                            'Kotlin', 'TypeScript', 'Rust', 'Dart', 'Scala', 'Perl', 'R', 'Shell',
                                            'Objective-C', 'Haskell', 'Lua', 'Elixir', 'Assembly', 'SQL', 'MATLAB',
                                            'VB.NET', 'COBOL', 'Fortran'
                                        ] as $language)
                                            <li>
                                                <div class="form-check">
                                                    <input class="form-check-input tag-checkbox" name="languages[]"
                                                           type="checkbox"
                                                           id="tag{{ $i }}" value="{{ $language }}"
                                                        {{ in_array($language, old('languages', [])) ? 'checked' : '' }}>
                                                    <label class="form-check-label"
                                                           for="tag{{ $i }}">{{ $language }}</label>
                                                </div>
                                            </li>
                                            @php $i++; @endphp
                                        @endforeach

                                    </ul>
                                </div>

                                <small class="text-muted">You can select multiple</small>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Hardware Requirements</label>
                                <select name="hardware_requirements" class="form-control">
                                    <option value="PC"
                                            {{ old('hardware_requirements') == 'PC' ? 'selected' : '' }} selected>PC
                                    </option>
                                    <option value="Mac" {{ old('hardware_requirements') == 'Mac' ? 'selected' : '' }}>
                                        Mac
                                    </option>
                                    <option
                                        value="Cell Phone" {{ old('hardware_requirements') == 'Cell Phone' ? 'selected' : '' }}>
                                        Cell Phone
                                    </option>
                                    <option
                                        value="Other" {{ old('hardware_requirements') == 'Other' ? 'selected' : '' }}>
                                        Other
                                    </option>
                                </select>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Software Requirements</label>
                                <input type="text" name="software_requirements" class="form-control" value="Windows 10">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Pre-requisites</label>
                                <input type="text" name="training_prereqs" class="form-control"
                                       value="{{ old('training_prereqs') }}"
                                       placeholder="Training Pre-requisites" required>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Periodicity</label>
                                <select name="training_periodicity" class="form-select">
                                    <option
                                        value="One Time" {{ old('training_periodicity') == 'One Time' ? 'selected' : '' }}>
                                        One Time
                                    </option>
                                    <option
                                        value="Daily" {{ old('training_periodicity') == 'Daily' ? 'selected' : '' }}>
                                        Daily
                                    </option>
                                    <option
                                        value="Weekly" {{ old('training_periodicity') == 'Weekly' ? 'selected' : '' }}>
                                        Weekly
                                    </option>
                                    <option
                                        value="Fortnightly" {{ old('training_periodicity') == 'Fortnightly' ? 'selected' : '' }}>
                                        Fortnightly
                                    </option>
                                    <option
                                        value="Monthly" {{ old('training_periodicity') == 'Monthly' ? 'selected' : '' }}>
                                        Monthly
                                    </option>
                                    <option
                                        value="Yearly" {{ old('training_periodicity') == 'Yearly' ? 'selected' : '' }}>
                                        Yearly
                                    </option>
                                </select>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Training Details</label>
                                <textarea name="training_details" class="form-control" placeholder="Training Details"
                                          rows="3">{{ old('training_details') }}</textarea>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Start Date</label>
                                    <input type="date" name="start_date" class="form-control"
                                           value=" {{ old('start_date') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">End Date</label>
                                    <input type="date" name="end_date" class="form-control"
                                           value="{{ old('end_date') }}">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Cost</label>
                                <input type="text" name="training_cost" value="{{ old('training_cost') }}"
                                       class="form-control"
                                       placeholder="Training Cost">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Discounts</label>
                                <input type="text" name="training_discounts" value="{{ old('training_discounts') }}"
                                       class="form-control"
                                       placeholder="Training Discounts">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Training Attachments</label>
                                <input type="file" name="training_list_attachments[]" class="form-control" multiple>
                            </div>


                            <div class="mb-3">
                                <label class="form-label">Confirmation Message</label>
                                <textarea name="confirmation_message" class="form-control" rows="3"
                                          placeholder="Confirmation Message">{{ old('confirmation_message') }}</textarea>
                            </div>

                            <div class="text-center">
                                <button type="button" class="btn btn-primary px-4" onclick="showPaymentModal()">Submit
                                    Advertisement
                                </button>
                            </div>

                            <input type="hidden" name="adPackage" id="add_package">
                            <input type="hidden" name="orgSize" id="org_size">
                            <input type="hidden" name="typeListing" id="type_listing">
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </section>


    <!-- Payment Modal -->
    <div class="modal fade" id="paymentModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Select Advertisement Package</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <!-- Package Selection -->
                    <div class="mb-3">
                        <label class="form-label">Choose Package</label>
                        <select class="form-select" id="adPackage" required>
                            <option value="">-- Select Package --</option>
                            <option value="50_2weeks">$50 for 2 weeks</option>
                            <option value="75_1month">$75 for 1 month</option>
                        </select>
                    </div>

                    <!-- Organization Size -->
                    <div class="mb-3">
                        <label class="form-label">Number of Employees</label>
                        <select class="form-select" id="orgSize" required>
                            <option value="">-- Select Range --</option>
                            <option value="1-10">1 - 10</option>
                            <option value="10-20">10 - 20</option>
                            <option value="20-50">20 - 50</option>
                            <option value="50-100">50 - 100</option>
                            <option value="100-200">100 - 200</option>
                            <option value="200-500">200 - 500</option>
                            <option value="500+">500+</option>
                        </select>
                    </div>

                    <!-- Tabular Listing Option -->
                    <div class="mb-3">
                        <label class="form-label">Tabular Listing Option</label>
                        <select class="form-select" id="tabularListing" required>
                            <option value="">-- Select Option --</option>
                            <option value="free">Free (Basic Tabular)</option>
                            <option value="quarter">Quarter ($20 per week)</option>
                        </select>
                    </div>

                    <hr>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" onclick="submitWithPayment()">Confirm & Submit
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@push('script')
        <script>
            function showPaymentModal() {
                let myModal = new bootstrap.Modal(document.getElementById('paymentModal'));
                myModal.show();
            }

            function submitWithPayment() {
                const package = document.getElementById("adPackage").value;
                const orgSize = document.getElementById("orgSize").value;
                const wantsTabular = document.getElementById("tabularListing").value;

                if (!package || !orgSize || !wantsTabular) {
                    alert('Please fill in all type fields.');
                    return;
                }
                document.getElementById('add_package').value = package;
                document.getElementById('org_size').value = orgSize;
                document.getElementById('type_listing').value = wantsTabular;

                document.getElementById('marketPlaceTrainingStore').submit();

                // 👉 Here you’d POST to your Laravel route via AJAX or normal form submission
            }


        </script>

@endpush