@extends('layouts.app')
@section('content')
    @include('layouts.sidebar')

    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <!-- Header content can go here -->
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <div class="content">
            <div class="block block-rounded">
                <div class="block-header">
                    <h4 class="block-title">Add Partner</h4>
                </div>

                <div class="block-content block-content-full">
                    <div class="loader" id="loader" style="display: none;">
                        <div class="external-shadow">
                            <div class="central">
                                <div class="intern"></div>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('partners.store') }}" method="POST">
                        @csrf

                        <!-- Name -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Partner Name</h6>
                            <input type="text" name="name" maxlength="255" minlength="3" required
                                value="{{ old('name') }}" class="form-control form-control-lg" placeholder="Enter Name" />
                            @error('name')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Email</h6>
                            <input type="email" name="email" maxlength="255" minlength="3" required
                                value="{{ old('email') }}" class="form-control form-control-lg"
                                placeholder="Enter Email" />
                            @error('email')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Country of Origin -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Country of Origin</h6>
                            <input type="text" name="country_origin" required value="{{ old('country_origin') }}"
                                class="form-control form-control-lg" placeholder="Enter Country" />
                            @error('country_origin')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Industry -->
                        <div class="form-group mb-4 col-8">
                            <h6 for="type">Industry</h6>
                            <select name="industry" class="form-control" required id="select-type">
                                <option value="">Select an Industry</option>
                                <option value="Agriculture and Allied Industries"
                                    {{ old('industry') == 'Agriculture and Allied Industries' ? 'selected' : '' }}>
                                    Agriculture and Allied Industries</option>
                                <option value="Auto Components"
                                    {{ old('industry') == 'Auto Components' ? 'selected' : '' }}>Auto Components</option>
                                <option value="Automobiles" {{ old('industry') == 'Automobiles' ? 'selected' : '' }}>
                                    Automobiles</option>
                                <option value="Aviation" {{ old('industry') == 'Aviation' ? 'selected' : '' }}>Aviation
                                </option>
                                <option value="Ayush" {{ old('industry') == 'Ayush' ? 'selected' : '' }}>Ayush</option>
                                <option value="Banking" {{ old('industry') == 'Banking' ? 'selected' : '' }}>Banking
                                </option>
                                <option value="Biotechnology" {{ old('industry') == 'Biotechnology' ? 'selected' : '' }}>
                                    Biotechnology</option>
                                <option value="Cement" {{ old('industry') == 'Cement' ? 'selected' : '' }}>Cement</option>
                                <option value="Chemicals" {{ old('industry') == 'Chemicals' ? 'selected' : '' }}>Chemicals
                                </option>
                                <option value="Consumer Durables"
                                    {{ old('industry') == 'Consumer Durables' ? 'selected' : '' }}>Consumer Durables
                                </option>
                                <option value="Defence Manufacturing"
                                    {{ old('industry') == 'Defence Manufacturing' ? 'selected' : '' }}>Defence
                                    Manufacturing</option>
                                <option value="E-Commerce" {{ old('industry') == 'E-Commerce' ? 'selected' : '' }}>
                                    E-Commerce</option>
                                <option value="Education and Training"
                                    {{ old('industry') == 'Education and Training' ? 'selected' : '' }}>Education and
                                    Training</option>
                                <option value="Electric Vehicle"
                                    {{ old('industry') == 'Electric Vehicle' ? 'selected' : '' }}>Electric Vehicle</option>
                                <option value="Electronics System Design & Manufacturing"
                                    {{ old('industry') == 'Electronics System Design & Manufacturing' ? 'selected' : '' }}>
                                    Electronics System Design & Manufacturing</option>
                                <option value="Engineering and Capital Goods"
                                    {{ old('industry') == 'Engineering and Capital Goods' ? 'selected' : '' }}>Engineering
                                    and Capital Goods</option>
                                <option value="Financial Services"
                                    {{ old('industry') == 'Financial Services' ? 'selected' : '' }}>Financial Services
                                </option>
                                <option value="FMCG" {{ old('industry') == 'FMCG' ? 'selected' : '' }}>FMCG</option>
                                <option value="Food Processing"
                                    {{ old('industry') == 'Food Processing' ? 'selected' : '' }}>Food Processing</option>
                                <option value="Gems and Jewellery"
                                    {{ old('industry') == 'Gems and Jewellery' ? 'selected' : '' }}>Gems and Jewellery
                                </option>
                                <option value="Healthcare" {{ old('industry') == 'Healthcare' ? 'selected' : '' }}>
                                    Healthcare</option>
                                <option value="Infrastructure" {{ old('industry') == 'Infrastructure' ? 'selected' : '' }}>
                                    Infrastructure</option>
                                <option value="Insurance" {{ old('industry') == 'Insurance' ? 'selected' : '' }}>Insurance
                                </option>
                                <option value="IT & BPM" {{ old('industry') == 'IT & BPM' ? 'selected' : '' }}>IT & BPM
                                </option>
                                <option value="Manufacturing" {{ old('industry') == 'Manufacturing' ? 'selected' : '' }}>
                                    Manufacturing</option>
                                <option value="Media and Entertainment"
                                    {{ old('industry') == 'Media and Entertainment' ? 'selected' : '' }}>Media and
                                    Entertainment</option>
                                <option value="Medical Devices"
                                    {{ old('industry') == 'Medical Devices' ? 'selected' : '' }}>Medical Devices</option>
                                <option value="Metals and Mining"
                                    {{ old('industry') == 'Metals and Mining' ? 'selected' : '' }}>Metals and Mining
                                </option>
                                <option value="MSME" {{ old('industry') == 'MSME' ? 'selected' : '' }}>MSME</option>
                                <option value="Oil and Gas" {{ old('industry') == 'Oil and Gas' ? 'selected' : '' }}>Oil
                                    and Gas</option>
                                <option value="Paper & Packaging"
                                    {{ old('industry') == 'Paper & Packaging' ? 'selected' : '' }}>Paper & Packaging
                                </option>
                                <option value="Pharmaceuticals"
                                    {{ old('industry') == 'Pharmaceuticals' ? 'selected' : '' }}>Pharmaceuticals</option>
                                <option value="Ports" {{ old('industry') == 'Ports' ? 'selected' : '' }}>Ports</option>
                                <option value="Power" {{ old('industry') == 'Power' ? 'selected' : '' }}>Power</option>
                                <option value="Railways" {{ old('industry') == 'Railways' ? 'selected' : '' }}>Railways
                                </option>
                                <option value="Real Estate" {{ old('industry') == 'Real Estate' ? 'selected' : '' }}>Real
                                    Estate</option>
                                <option value="Renewable Energy"
                                    {{ old('industry') == 'Renewable Energy' ? 'selected' : '' }}>Renewable Energy</option>
                                <option value="Retail" {{ old('industry') == 'Retail' ? 'selected' : '' }}>Retail</option>
                                <option value="Roads" {{ old('industry') == 'Roads' ? 'selected' : '' }}>Roads</option>
                                <option value="Science and Technology"
                                    {{ old('industry') == 'Science and Technology' ? 'selected' : '' }}>Science and
                                    Technology</option>
                                <option value="Services" {{ old('industry') == 'Services' ? 'selected' : '' }}>Services
                                </option>
                                <option value="Steel" {{ old('industry') == 'Steel' ? 'selected' : '' }}>Steel</option>
                                <option value="Telecommunications"
                                    {{ old('industry') == 'Telecommunications' ? 'selected' : '' }}>Telecommunications
                                </option>
                                <option value="Textiles" {{ old('industry') == 'Textiles' ? 'selected' : '' }}>Textiles
                                </option>
                                <option value="Tourism and Hospitality"
                                    {{ old('industry') == 'Tourism and Hospitality' ? 'selected' : '' }}>Tourism and
                                    Hospitality</option>
                            </select>
                        </div>

                        <!-- Role -->
                        <div class="form-group mb-4 col-8">
                            <h6 for="type">Role</h6>
                            <select name="role_id" class="form-control" required id="select-type">
                                <option value="">Select a Role</option>
                                @foreach ($partnerRoles as $partnerRole)
                                    <option value="{{ $partnerRole->id }}"
                                        {{ old('role_id') == $partnerRole->id ? 'selected' : '' }}>
                                        {{ $partnerRole->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Description -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Description</h6>
                            <textarea name="description" class="form-control">{{ old('description') }}</textarea>
                            @error('description')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <!-- Partner Type -->
                        <div class="form-outline mb-3 col-8">
                            <label for="">Partner Type</label>
                            <select class="form-control form-control-lg" name="partner_type" id="partner_type"
                                required="required">
                                <option value="">Select Partner Type</option>
                                <option value="1" {{ old('partner_type') == '1' ? 'selected' : '' }}>QR Code
                                    Restriction</option>
                                <option value="0" {{ old('partner_type') == '0' ? 'selected' : '' }}>No Restriction
                                </option>
                            </select>
                        </div>

                        <!-- Placeholder for QR Quantity -->
                        <div id="qr-quantity-placeholder">
                            @if (old('partner_type') == '1')
                                <div class="form-outline mb-4 col-8">
                                    <h6>Total QR Quantity</h6>
                                    <input type="number" name="total_qr_qty" required value="{{ old('total_qr_qty') }}"
                                        class="form-control form-control-lg" placeholder="Enter QR Quantity" />
                                    @error('total_qr_qty')
                                        <span class="text text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endif
                        </div>

                        <!-- Amount -->
                        <div class="form-outline mb-4 col-8">
                            <h6>Amount</h6>
                            <input type="text" name="amount" required value="{{ old('amount') }}"
                                class="form-control form-control-lg" placeholder="Enter Amount" />
                            @error('amount')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group pt-2">
                            <a href="{{ route('partners.index') }}">
                                <button type="button" class="backbtn">Back</button>
                            </a>
                            <button type="submit" class="addbtn">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#partner_type').change(function() {
                var partnerType = $(this).val();
                var qrQuantityPlaceholder = $('#qr-quantity-placeholder');

                if (partnerType == '1') {
                    var qrQuantityField = `
                        <div class="form-outline mb-4 col-8">
                            <h6>Total QR Quantity</h6>
                            <input type="number" name="total_qr_qty" required value="{{ old('total_qr_qty') }}"
                                class="form-control form-control-lg" placeholder="Enter QR Quantity" />
                            @error('total_qr_qty')
                                <span class="text text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    `;
                    qrQuantityPlaceholder.html(qrQuantityField);
                } else {
                    qrQuantityPlaceholder.html('');
                }
            });
        });
    </script>
@endsection