@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<style>
    .is-invalid {

        border: 2px solid #dc3545 !important;

    }

    .select2-container .select2-selection--single {
        height: 42px !important;
        border-radius: 6px !important;
        border: 1px solid #ced4da !important;
        background: #fff !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #333 !important;
        line-height: 40px !important;
        padding-left: 14px !important;
        padding-right: 40px !important;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
        right: 10px;
    }

    .select2-container--default .select2-selection--single .select2-selection__clear {
        position: absolute !important;
        right: 28px !important;
        top: 50% !important;
        transform: translateY(-50%);
        float: none !important;
        color: #333;
        font-size: 16px;
    }

    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #696cff !important;
        box-shadow: 0 0 0 .18rem rgba(105, 108, 255, .15) !important;
    }

    .select2-dropdown {
        border-radius: 6px !important;
        border: 1px solid #ced4da !important;
        overflow: hidden;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    }

    .select2-container--default .select2-search--dropdown .select2-search__field {
        border-radius: 6px !important;
        border: 1px solid #ced4da !important;
        padding: 8px 12px !important;
        outline: none;
    }

    .select2-container--default .select2-search--dropdown .select2-search__field:focus {
        border-color: #696cff !important;
        box-shadow: 0 0 0 .18rem rgba(105, 108, 255, .15) !important;
    }

    .select2-container--default .select2-results__option {
        padding: 8px 14px;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background: #696cff !important;
        color: #fff !important;
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        background: rgba(105, 108, 255, .08);
    }

    .is-invalid+.select2-container .select2-selection--single {
        border-color: #dc3545 !important;
    }
</style>

@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5>

                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('view_credentials', $project_id ?? null) }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                </button>

                Upload credentials

            </h5>

        </div>

    </div>

    <div class="card p-3">

        <h6>Upload credentials</h6>

        <form action="{{ route('store_credential') }}" method="POST" enctype="multipart/form-data">

            @csrf



            <div class="row g-2">
                <div class="col-lg-6 mb-2">
                    <label class="form-label">Choose Project</label>

                    <select name="project_id" id="project_id" class="form-select @error('project_id') is-invalid @enderror">

                        <option value="">Select</option>

                        @foreach ($projects as $proj)
                            <option value="{{ $proj->id }}" {{ old('project_id', $project->id ?? '') == $proj->id ? 'selected' : '' }}>
                                {{ $proj->project_name }}
                            </option>
                        @endforeach

                    </select>

                    @error('project_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- PLATFORM --}}

                <div class="col-lg-6 mb-2">

                    <label class="form-label">Platform<span class="text-danger">*</span></label>

                    <input type="text" name="platform" class="form-control @error('platform') is-invalid @enderror"
                        value="{{ old('platform') }}" placeholder="Enter Platform">



                    @error('platform')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>

                {{-- LINK --}}



                <div class="col-lg-6 mb-2">

                    <label class="form-label">Website Link</label>



                    <input type="url" name="link" class="form-control" placeholder="https://example.com">

                </div>

                <div class="col-lg-6 mb-2">



                    <label class="form-label">

                        OTP Required?

                    </label>



                    <select name="is_otp_required" id="is_otp" class="form-select">



                        <option value="no">No</option>

                        <option value="yes">Yes</option>



                    </select>



                </div>

                <div class="col-lg-6 mb-2 otp-section">



                    <label class="form-label">

                        OTP Delivery Method

                    </label>



                    <select name="otp_delivery_method" id="otp_delivery_method" class="form-select">



                        <option value="">Select</option>



                        <option value="email">

                            Email

                        </option>



                        <option value="phone">

                            Phone Number

                        </option>



                    </select>



                </div>

                <div class="col-lg-6 mb-2 otp-section">



                    <label class="form-label">

                        OTP Sent To

                    </label>



                    <input type="text" name="otp_sent_to" class="form-control"
                        placeholder="example@gmail.com / +91XXXXXXXXXX">



                </div>

                {{-- USER ID --}}

                <div class="col-lg-6 mb-2">

                    <label class="form-label">User ID / Email<span class="text-danger">*</span></label>

                    <input type="text" name="user_id" class="form-control @error('user_id') is-invalid @enderror"
                        value="{{ old('user_id') }}" placeholder="Enter User ID / Email">



                    @error('user_id')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>



                {{-- PASSWORD --}}

                <div class="col-lg-6 mb-2">

                    <label class="form-label">Password<span class="text-danger">*</span></label>

                    <input type="text" name="password" class="form-control @error('password') is-invalid @enderror"
                        value="{{ old('password') }}" placeholder="Enter Password">



                    @error('password')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>



                {{-- DOCUMENT --}}

                <div class="col-lg-6 mb-2">

                    <label class="form-label">Upload Document (Nullable)</label>

                    <input type="file" name="document" class="form-control @error('document') is-invalid @enderror">



                    @error('document')

                        <div class="invalid-feedback">{{ $message }}</div>

                    @enderror

                </div>



            </div>



            <div class="form-action d-flex justify-content-center mt-3">

                <button class="btn btn-label-secondary me-4" type="reset">Discard</button>

                <button type="button" id="submitBtn" class="btn btn-primary">

                    Submit

                </button>

            </div>

        </form>

    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>

        $(document).ready(function () {

            $('#project_id').select2({
                placeholder: "Select Project",
                allowClear: true,
                width: '100%'
            });

        });
        document.addEventListener("DOMContentLoaded", function () {



            const form = document.querySelector("form");

            const btn = document.getElementById("submitBtn");



            btn.addEventListener("click", function () {



                // disable button

                btn.disabled = true;



                // loading text

                btn.innerHTML = "Processing...";



                // submit form manually

                form.submit();

            });



        });
    </script>

@endsection