@extends('layouts.app')
@section('title', 'Create Customer Segment')

@section('content')
    <form action="{{ route('csm.customer-segments.store') }}" method="POST" id="createSegmentForm">
        @csrf
        <div class="fixed-action-bar">
            <div class="fw-semibold fixed-nav-title">Create Customer Segment</div>
            <div>
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center"
               data-toggle="tooltip" title="Add"></i>
               
                <i id="submitForm" class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" data-placement="top" title="Save"></i>
                
            <i class="fa-regular fa-edit fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Edit"></i>
            <i 
                class="fa-regular fa-trash-can fixed-nav-btn fixed-nav-btn rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Delete"></i>
            
                <a href="{{ route('csm.customer-segments.index') }}" class="fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center ms-1" data-toggle="tooltip" data-placement="top" title="Cancel">
                    <i class="fa-solid fa-xmark"></i>
                </a>
            </div>
        </div>

        <div class="row mt-3 mb-5">
            <div class="col-md-8">
                <div class="card">
                    <h5 class="card-title">Create Customer Segment</h5>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-8 mb-3">
                                <label for="name" class="form-label">Segment Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control @error('description') is-invalid @enderror" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('js')
    <script>
        document.getElementById('submitForm').addEventListener('click', function() {
            document.getElementById('createSegmentForm').submit();
        });
    </script>
@endpush