@extends('layout.admin')

@section('meta_tags')
@stop

@section('pagename')
    Tiers
@stop

@section('top_import_file')
@stop

@section('content')
<div class="card radius-10 w-100">
    <div class="card-body">
        <form id="regstr" class="row g-3">
            <div id="error" class="alert alert-danger d-none"></div>
            <div class="col-4">
              <label class="form-label">Tier Name</label>
              <input type="text" name="package_name" class="form-control" placeholder="Enter Tier Name" required>
            </div>
            <div class="col-4">
              <label class="form-label">No. of Tokens</label>
              <input type="number" name="tokens" class="form-control" placeholder="Enter no. of tokens" required>
            </div>
            <div class="col-4">
                <label class="form-label">Price</label>
                <input type="number" name="price" class="form-control" placeholder="xxx" required>
            </div>
            <div class="col-4">
                <label class="form-label">Description</label>
                <textarea placeholder="Type Description" name="tier_description" cols="30" rows="1" class="form-control" required></textarea>
            </div>
            <div class="col-4">
                <label class="form-label">Allow Models</label>
                <select name="model_allowed[]" class="form-select" id="small-bootstrap-class-multiple-field" data-placeholder="Choose Models" required multiple>
                    @foreach ($permissionmodules as $module)
                        <option value="{{ $module->code }}"> {{ $module->name }} </option>
                    @endforeach
                </select>
            </div>
            <div class="col-4">
                <label class="form-label">Subscription Type</label>
                <select name="package_type" class="form-control" required>
                    <option value="" selected disabled>Select</option>
                    <option value="monthly">Monthly</option>
                    <option value="yearly">Yearly</option>
                </select>
            </div>
            <div class="d-flex justify-content-end">
                <div class="d-grid">
                    <button class="btn btn-primary d-none" type="button" id="spinner" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Creating...
                    </button>
                    <button type="submit" class="btn btn-primary">Create</button>
                </div>
            </div>
          </form>
    </div>
</div>


<div class="card radius-10 w-100">
    <div class="card-body">
    <div class="d-flex align-items-center">
        <h6 class="mb-0">Users</h6>
    </div>
    <div class="table-responsive mt-2">
        <table class="table align-middle mb-0 dataTable" id="example">
        <thead class="table-light">
            <tr>
                <th>Date</th>
                <th>Tier Name</th>
                <th>Tokens</th>
                <th>Price</th>
                <th>Description</th>
                <th>Models Allowed</th>
                <th>Type</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($tiers as $tier)
                <tr>
                    <td>{{ $tier->created_at->format('d-M-y g:i A') }}</td>
                    <td>{{ $tier->package_name }}</td>
                    <td>{{ $tier->tokens }}</td>
                    <td>$ {{ $tier->price }}</td>
                    <td>{{ $tier->tier_description }}</td>
                    <td>
                        @php
                            $modules = json_decode($tier->model_allowed);
                        @endphp
                    
                        @foreach ($modules as $value)
                            @switch($value)
                                @case('tts')
                                    Text To Speech<br>
                                    @break
                    
                                @case('sts')
                                    Speech To Speech<br>
                                    @break
                    
                                @case('vcl')
                                    Voice Cloning<br>
                                    @break
                    
                                @case('lip')
                                    Lip Syncing<br>
                                    @break
                    
                                @case('pjc')
                                    Project Creation<br>
                                    @break

                                @case('scc')
                                    Script Creation<br>
                                    @break
                                @case('usrcrt')
                                    User Creation<br>
                                    @break
                                @case('rlcrt')
                                    Role Creation<br>
                                    @break
                    
                                @default
                                    N/A<br>
                            @endswitch
                        @endforeach
                    </td>
                    <td>{{ $tier->package_type }}</td>
                    <td>{{ $tier->status ? "Active" : "Inactive" }}</td>
                    <td>
                        <div class="table-actions d-flex align-items-center gap-3 fs-6">
                            <button class="btn text-warning editbtn" data-everything='@json($tier)' data-bs-toggle="modal" data-bs-target="#exampleExtraLargeModal" data-bs-placement="bottom" title="" data-bs-original-title="Edit" aria-label="Edit"><ion-icon name="create" size="large"></ion-icon></button>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
        </table>
    </div>
    </div>
</div>

    {{-- Edit Modal --}}
    <div class="modal fade" id="exampleExtraLargeModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit <span id="PackageName"></span></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="regstrEdit" class="row g-3">
                        <div id="erroredit" class="alert alert-danger d-none"></div>
                        <input type="text" class="d-none" readonly name="id" id="tier_id">
                        <div class="col-6">
                            <label class="form-label">Tier Name</label>
                            <input type="text" name="package_name" id="modal_tier_name" class="form-control" placeholder="Enter Tier Name">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Tokens</label>
                            <input type="anumber" name="tokens" id="modal_tokens" class="form-control" placeholder="Enter no. of tokens">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Price</label>
                            <input type="text" name="price" id="modal_price" class="form-control" placeholder="xxx">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Description</label>
                            <textarea name="tier_description" id="modal_description" cols="30" rows="1" class="form-control" placeholder="Type Description"></textarea>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Allow Models</label>
                            <select name="model_allowed[]" class="form-select modal_model_allowed" id="small-bootstrap-class-multiple-field-2" data-placeholder="Choose Models" multiple>
                                @foreach ($permissionmodules as $module)
                                    <option value="{{ $module->code }}"> {{ $module->name }} </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Subscription Type</label>
                            <select name="package_type" id="modal_ptype" class="form-control" required>
                                <option value="monthly">Monthly</option>
                                <option value="yearly">Yearly</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Status</label>
                            <select name="status" id="modal_status" class="form-control" required>
                                <option value="1">Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button class="btn btn-primary d-none" type="button" id="modal_spinner" disabled>
                        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                        Updating...
                    </button>
                    <button type="button" class="btn btn-primary" id="save_edit">Update</button>
                </div>
            </div>
        </div>
    </div>
    {{-- Edit Modal --}}
@stop

@section('bottom-scripts')
    {{-- Add Tier Script --}}
    <script>
        $(function() {
            $("#regstr").on("submit", function(e) {
                e.preventDefault();
                var formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}')

                $.ajax({
                    url: "{{ route('admin.tiers.submit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $(":submit").prop("disabled", true);
                        $(":submit").addClass("d-none");
                        $("#spinner").removeClass("d-none");
                        $("#error").addClass("d-none");
                    },
                    success: function(res) {

                        let obj = res

                        if (obj.error) {
                            $("#error").html(obj.error);
                            $("#error").removeClass("d-none");
                            $("#spinner").addClass("d-none");
                            $(":submit").removeClass("d-none");
                            // toastr.error("Please check errors list!", "Error");
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#spinner").addClass("d-none");
                            // toastr.success("Welcome!", "On Board!");

                            setTimeout(function() {
                                // window.location = "{{ url('dashboard') }}"; // Use Laravel's URL helper to generate the correct URL
                                window.location.href = "{{ route('admin.tiers.view') }}"
                            }, 1000);
                        } else {
                            $("#spinner").addClass("d-none");
                            $(":submit").prop("disabled", false);
                            $(":submit").removeClass("d-none");
                            // toastr.error("Something bad happened!", "Error");
                            $(window).scrollTop(0);
                        }

                        $(":submit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error)
                        // toastr.error("Please check the error list", "Error");
                        $(window).scrollTop(0);

                        $("#error").html(error.responseJSON.message || error.responseJSON.error);
                        $("#error").removeClass("d-none");
                        $("#spinner").addClass("d-none");
                        $(":submit").prop("disabled", false);
                        $(":submit").removeClass("d-none");
                    }
                });
            });
        });
    </script>

    {{-- Tooltip Script --}}
    <script>
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-placement="bottom"]'));
        var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    </script>

    {{-- Edit Modal Script --}}
    <script>
        $(".editbtn").on('click', function(){
            var data = $(this).attr('data-everything');
            data = JSON.parse(data)

            // Set values in the modal fields
            $("#tier_id").val(data.id)
            $("#modal_tier_name").val(data.package_name);
            $("#modal_tokens").val(data.tokens);
            $("#modal_price").val(data.price);
            $("#modal_description").text(data.tier_description);
            $("#modal_ptype").val(data.package_type);
            $("#modal_status").val(data.status ? 1 : 0);

            var modelAllowed = JSON.parse(data.model_allowed);
            $(".modal_model_allowed").val(modelAllowed).trigger('change');
        });
    </script>

    {{-- Edit Tier Script --}}
    <script>
        $(function() {
            $("#save_edit").click(function(){
                $("#regstrEdit").submit()
            })

            $("#regstrEdit").on("submit", function(e) {
                e.preventDefault();
                var formdata = new FormData(this);
                formdata.append('_token', '{{ csrf_token() }}')

                $.ajax({
                    url: "{{ route('admin.tiers.edit') }}",
                    type: "post",
                    data: formdata,
                    processData: false,
                    contentType: false,
                    cache: false,
                    beforeSend: function() {
                        $("#save_edit").prop("disabled", true);
                        $("#save_edit").addClass("d-none");
                        $("#modal_spinner").removeClass("d-none");
                        $("#erroredit").addClass("d-none");
                    },
                    success: function(res) {

                        let obj = res

                        if (obj.error) {
                            $("#erroredit").html(obj.error);
                            $("#erroredit").removeClass("d-none");
                            $("#modal_spinner").addClass("d-none");
                            $("#save_edit").removeClass("d-none");
                            // toastr.error("Please check errors list!", "Error");
                            $(window).scrollTop(0);
                        } else if (obj.success) {
                            $("#modal_spinner").addClass("d-none");
                            // toastr.success("Welcome!", "On Board!");

                            setTimeout(function() {
                                window.location.href =
                                    "{{ route('admin.tiers.view') }}"
                            }, 1000);
                        } else {
                            $("#modal_spinner").addClass("d-none");
                            $("#save_edit").prop("disabled", false);
                            $("#save_edit").removeClass("d-none");
                            // toastr.error("Something bad happened!", "Error");
                            $(window).scrollTop(0);
                        }

                        $("#save_edit").prop("disabled", false);
                    },
                    error: function(error) {
                        console.log(error)
                        // toastr.error("Please check the error list", "Error");
                        $(window).scrollTop(0);

                        $("#erroredit").html(error.responseJSON.message || error.responseJSON
                        .error);
                        $("#erroredit").removeClass("d-none");
                        $("#modal_spinner").addClass("d-none");
                        $("#save_edit").prop("disabled", false);
                        $("#save_edit").removeClass("d-none");
                    }
                });
            });
        });
    </script>

@stop