@extends('layouts.app')
@php
    $title = isset($permission) ? 'Edit Permission' : 'Create Permission';
@endphp
@section('title', $title)
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Permissions</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">{{ $title }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{{ $title }}</h3>
                        </div>


                        <form id="permissionForm"
                            action="{{ isset($permission) ? route('permission.update', $permission->id) : route('permission.store') }}"
                            method="post" enctype="multipart/form-data">
                            @csrf
                            @if (isset($permission))
                                @method('PUT')
                            @endif

                            <div class="card-body">
                                <div class="row">
                                    <input type="hidden" claaa="form-control" name="id" value="{{ isset($permission) ? $permission->id : ''}}">
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="name">Name</label>

                                            <input type="text" class="form-control" name="name" id="name"
                                                value="{{ old('name', $permission->name ?? '') }}" placeholder="Enter name">
                                        </div>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <a href="{{ route('permission.list') }}" class="btn btn-secondary">Cancel</a>
                                <button type="button" id="storePermission"
                                    class="btn btn-primary">{{ isset($permission) ? 'Update' : 'Submit' }}</button>
                            </div>
                        </form>

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

@endsection
@section('scripts')
    <script src="{{ asset('js/jquery.validate.min.js') }}"></script>
    <script src="{{ asset('js/additional-methods.min.js') }}"></script>
    <script src="{{ asset('js/custom.js') }}"></script>
    <script>
        $(document).ready(function() {
            
            $("#permissionForm").validate({
                rules: {
                    name: {
                        required: true,
                        maxlength: 100
                    },
                },
                messages: {
                    name: {
                        required: "Please enter a name",
                        maxlength: "Name cannot exceed 100 characters"
                    },
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    if (element.hasClass("select2-hidden-accessible")) {
                        error.addClass('invalid-feedback');
                        element.next(".select2-container").after(error);
                    } else {
                        error.addClass('invalid-feedback');
                        element.closest('.form-group').append(error);
                    }
                },
                highlight: function(element) {
                    if ($(element).hasClass("select2-hidden-accessible")) {
                        $(element).next(".select2-container").find(".select2-selection").addClass(
                            'is-invalid');
                    } else {
                        $(element).addClass('is-invalid');
                    }
                },
                unhighlight: function(element) {
                    if ($(element).hasClass("select2-hidden-accessible")) {
                        $(element).next(".select2-container").find(".select2-selection").removeClass(
                            'is-invalid');
                    } else {
                        $(element).removeClass('is-invalid');
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            $.validator.addMethod("selectRequired", function(value, element) {
                return value !== "" && value !== "Select Country" && value !== "Select State" && value !==
                    "Select City";
            }, "This field is required");

            $('#profile_photo').on('change', function() {
                var fileName = $(this).val().split("\\").pop();
                $(this).next('.custom-file-label').addClass("selected").html(fileName);
            });

            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param);
            }, 'File size must be less than 1MB.');

            $("#storePermission").click(function(e) {
                if ($("#permissionForm").valid()) {
                    $("#permissionForm").submit();
                }
            });
        });
    </script>
@endsection