@extends ('layouts.app')

@section('content')

<div class="container">
    @include('layouts.subnav')

    <div class="mb-4"></div>

    @if(session('success'))
    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1050;">
        <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true" autohide="false">
            <div class="d-flex">
                <div class="toast-body">
                    {{ session('success') }}
                </div>
                <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    </div>
    <script>
        setTimeout(function() {
            location.reload();
        }, 1000);
    </script>
    @endif

    @if (auth()->user()->name === 'admin')
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" style="color: black;" data-bs-toggle="tab" href="#home">Add Plan Details</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" style="color: black;" data-bs-toggle="tab" href="#menu1">Content Sets</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class=" tab-pane active"><br> 
            <h1 class="fs-3 fw-bold">Add Plan Details</h1><br>
            <div class="row">
                <div class="justify-content-center mx-auto" style="width:70%;">
                    <form action="{{ route('addplan') }}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="organization_id" value="{{ $organization->id }}">
                        @csrf
                        <div class="row mb-3">
                            <label for="name" class="col-sm-2 fw-bold col-form-label">Plan Name:</label>
                            <div class="col-sm-10 m-auto">
                                <input class="form-control rounded-pill border-3" type="text" name="name" placeholder="Enter Plan Name" id="name" multiple>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="video_and_sound_quality" class="col-sm-2 fw-bold col-form-label">Plan Slug Name:</label>
                            <div class="col-sm-10 m-auto">
                                <input class="form-control rounded-pill border-3" type="text" name="slug" placeholder="Enter Plan Slug" id="slug" multiple>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="resolution" class="col-sm-2 fw-bold col-form-label">Amount:</label>
                            <div class="col-sm-10 m-auto">
                                <input class="form-control rounded-pill border-3" type="text" name="amount" placeholder="Enter Plan Amount" id="amount" multiple>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="supported_devices" class="col-sm-2 fw-bold col-form-label">Description:</label>
                            <div class="col-sm-10 m-auto">
                                <input class="form-control rounded-pill border-3" type="text" name="description" placeholder="Enter Plan Description" id="description" multiple>
                            </div>
                        </div>

                        <div class="row mb-3  align-items-center">
                            <label for="download_devices" class="col-sm-2 fw-bold col-form-label">Duration:</label>
                            <div class="col-sm-10 m-auto">
                                <input class="form-control rounded-pill border-3" type="text" name="duration" placeholder="Enter Plan Duration" id="duration" multiple>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="d-flex align-items-center">
                                <label for="no_ad" class="col-sm-2 fw-bold col-form-label">Is Active:</label>
                                <div class="col-sm-10 m-auto">
                                    <div class="form-check form-switch ms-2">
                                        <input class="form-check-input border-3" type="checkbox" name="is_active" role="switch" id="flexSwitchCheckDefault">
                                        <label class="form-check-label" for="flexSwitchCheckDefault"></label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3"></div>

                        <div class="nav nav-pills justify-content-center align-items-center">
                            <button type="submit" class="border-3 btn btn-success fw-bold">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <div id="menu1" class=" tab-pane fade"><br>
            <h1 class="fs-3 fw-bold">Add Content Sets</h1><br>
            <div class="row">
                <div class="justify-content-center mx-auto" style="width:70%;">
                    <form action="{{ route('contentsets.upload') }}" method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="id" value="{{$organization->id}}">
                        @csrf
                        <div class="row mb-3">
                            <label for="plan" class="col-sm-2 fw-bold col-form-label">Choose a Plan:</label>
                            <div class="col-sm-10 m-auto">
                                <select name="monitization_plans_id" id="monitization_plans_id" class="form-select rounded-pill border-3">
                                    <option value="">Select Plan</option>
                                    @foreach($plans as $plan)
                                    <option value="{{ $plan->id }}">{{ $plan->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="video_and_sound_quality" class="col-sm-2 fw-bold col-form-label">Video And Sound Quality:</label>
                            <div class="col-sm-10 m-auto">
                                <select name="video_and_sound_quality" id="video_and_sound_quality" class="form-select rounded-pill border-3">
                                    <option value="#">Select Video And Sound Quality</option>
                                    <option value="fair">Fair</option>
                                    <option value="good">Good</option>
                                    <option value="great">Great</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="resolution" class="col-sm-2 fw-bold col-form-label">Resolution:</label>
                            <div class="col-sm-10 m-auto">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="resolution[]" value="360p">
                                    <label class="form-check-label">360p</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="resolution[]" value="480p">
                                    <label class="form-check-label">480p</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="resolution[]" value="720p(HD)">
                                    <label class="form-check-label">720p(HD)</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="resolution[]" value="1080p(Full HD)">
                                    <label class="form-check-label">1080p(Full HD)</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <label for="supported_devices" class="col-sm-2 fw-bold col-form-label">Supported Devices:</label>
                            <div class="col-sm-10 m-auto">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="supported_devices[]" value="mobile phone">
                                    <label class="form-check-label">Mobile Phone</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="supported_devices[]" value="tablet">
                                    <label class="form-check-label">Tablet</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="supported_devices[]" value="tv">
                                    <label class="form-check-label">Tv</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input border-3" type="checkbox" name="supported_devices[]" value="computer">
                                    <label class="form-check-label">Computer</label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3  align-items-center">
                            <label for="download_devices" class="col-sm-2 fw-bold col-form-label">Download Devices:</label>
                            <div class="col-sm-10 m-auto">
                                <select name="download_devices" class="form-select rounded-pill border-3">
                                    <option>Select Download Devices</option>
                                    <option value="1">1</option>
                                    <option value="2">2</option>
                                    <option value="4">4</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="d-flex align-items-center">
                                <label for="no_ad" class="col-sm-2 fw-bold col-form-label">No Ad:</label>
                                <div class="col-sm-10 m-auto">
                                    <select name="no_ad" class="form-select rounded-pill border-3">
                                        <option>Select Ads</option>
                                        <option value="with ads">With Ads</option>
                                        <option value="without ads">Without Ads</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3"></div>

                        <div class="nav nav-pills justify-content-center align-items-center">
                            <button type="submit" class="border-3 btn btn-success fw-bold">Upload</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @else
    <div class="mt-5"></div>
    <span class="alert alert-danger fw-bold fs-6 rounded-pill">
        You don't have permission
    </span>
    @endif

</div>

@endsection